How to render JSX component inside specific html div in react?

Question

If I have multiple divs whose are rendered from data array using array.map() method like that:

    import React,{ ReactDOM } from 'react'
    import { useState,useEffect,useRef } from 'react'
    import getResults from '../api/getResults'
    ...
    function Results (props){
      const [results,setResults]=useState([])
      useEffect(()=>{
      setResults(getResults(props.season))},
      [props.season])
    return (
    {results.map((elem,index)=>{
       return (            
        <div key={index} onClick={()=/*what should I do to render inside this div?*/>}>{elem}</div>
       )
        })}
        <Details/> //I want to render this jsx inside the clicked div
      )
       ........
      }

How to get reference of specific clicked div to render Details jsx component inside this div? I tried use useRef hook but it always return the last div.

David · Accepted Answer · 2023-02-09 20:54:03Z

1

Track the clicked element in state. For example, consider this state value:

const [clickedElement, setClickedElement] = useState();

By default the value is undefined. You can update the value to some identifier when clicking one of the elements:

<div key={index} onClick={() => setClickedElement(index)}>{elem}</div>

Now each click updates state indicating which element was clicked.

Then you can use that state value to determine what to render. For example:

<div key={index} onClick={() => setClickedElement(index)}>
  {elem}
  {clickedElement === index ? <Details/> : null}
</div>

Basically any way you approach it, the structure is pretty much always the same:

Track information in state.
Events (e.g. a click event) update state.
UI is rendered based on state.

edited Feb 9, 2023 at 20:54

answered Feb 9, 2023 at 20:49

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to render JSX component inside specific html div in react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related