Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Why is my setSelected useState not accepting the data from the .map function? I have the following react js code:

    const [ selected, setSelected ] = useState(null)
    const sectionItems = [
        { id: "1", title: "title1", description: "description1" },
        { id: "2", title: "title2", description: "description2" },
        { id: "3", title: "title3", description: "description3" },
I am mapping through the sectionItems and rendering a modal, based on if selected has an item or not:
{sectionItems.map((section, index) => {
                    return (
                        <div key={section.id} className="processSection1" onClick={setSelected(section) >
                            <div className="processTitle" >{section.title}</div>
{selected ? <Modal title={selected.title} description={selected.description}  /> : " "}
Problem: Why cant I pass the data into setSelected? Or the more precise question is, how can I render the modal with each sectionItem?
Also am getting this error: Too many re-renders. React limits the number of renders to
prevent an infinite loop.
If you want to add a value to a function you should use an inline function inside the onClick. Right now you are triggering the function for each rendering at render time.
Change:
onClick={setSelected(section)}
onClick={() => setSelected(section)}
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.