How to call onClick event handler in a recursive component in react.js?

Question

I am trying to implement onClick event handle to get the details of the card. However, when clicking on it I am getting the details of some other card, not the card which I am trying to click. The Card component is recursive as I am creating a tree. Attaching the image for the reference.

 const Card = (props: any) => {
    const handleClick = (item: any) => {
        console.log("This is value: ", item)
    }
    const [selectedOption, setSelectedOption] = useState(null);
    return (
        <ul>
            {props.data.map((item: any, index: any) => (
                <React.Fragment key={item.name}>
                    <li>
                        <div className="card">
                            <div className="card-body">
                                <p>{item.name}</p>
                            </div>
                            <div onClick={() => handleClick(item)}>
                                    <Select
                                        defaultValue={selectedOption}
                                        onChange={handleChange}
                                        className="select"
                                        options={props.users}
                                    />
                            </div>
                            <div></div>
                        </div>
                        {item.children?.length && <Card data={item.children} users={[]} />}
                    </li>
                </React.Fragment>
            ))}
        </ul>
    );
};

const AccountabilityChartComponent = () => {
    return (
        <div className="grid">
            <div className="org-tree">
                <Card
                    users={users}
                    data={hierarchy}
                />
            </div>
        </div>
    );
};
export default AccountabilityChartComponent;

Mulan · Answer 1 · 2022-08-02T20:04:53.520

0

Currying the onClick handler is a useful technique. It's particularly convenient because the item and the click event are colocated within the same function -

function App({ items = [] }) {
  const onClick = item => event => {   // <--
    console.log(event.target, item)
  }
  return <div>
    {items.map((item, key) =>
      <button key={key} onClick={onClick(item)} children={item.name} />
    )}
  </div>
}

const items = [
  { name: "apple", price: 3 },
  { name: "pear", price: 4 },
  { name: "kiwi", price: 5 }
]

ReactDOM.render(<App items={items} />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

edited Aug 02 '22 at 20:04

answered Aug 02 '22 at 19:57

Mulan

129,518
31
228
259

This is a simple array of objects. The array I am mapping on a tree looks like this: data = [{ name: "Jhon Doe", children: [{ name: "Alica Greene", children:[] }, { name: "David Wilson", children:[{......}] } ] }] – Syed Obaidullah Aug 02 '22 at 20:18
@SyedObaidullah that doesn't really change anything. Is the question how to render a recursive structure? – Mulan Aug 03 '22 at 01:21

How to call onClick event handler in a recursive component in react.js?

1 Answers1