React modal custom component not showing the correct data

Question

I have built this modal component using react hooks. However the data that the modal shows when it pops up its incorrect (it always shows the name property for last element in the array).

//Modal.js
import ReactDOM from 'react-dom';

const Modal = ({ isShowing, hide, home_team }) => {return isShowing ? ReactDOM.createPortal(
  <React.Fragment>
    <div className="modal-overlay"/>
    <div className="modal-wrapper">
      <div className="modal">
        <div className="modal-header">
        <a>Home team: {home_team}</a>
          <button type="button" className="modal-close-button" onClick={hide}>
          </button>
        </div>
      </div>
    </div>
  </React.Fragment>, document.body
) : null;}

export default Modal;

// Main component

const League = ({ league, matches }) =>{ 
    const {isShowing, toggle} = useModal(); 
    return (
    <Fragment>
        <h2>{league}</h2>
        {
            matches.map((
                { 
                    match_id,
                    country_id,
                    home_team
                }
            ) => 
            {
                return (
                    <div>
                        <p>{match_id}</p>
                        <button className="button-default" onClick={toggle}>Show Modal</button>
                        <a>{home_team}</a>
                        <Modal
                            isShowing={isShowing}
                            hide={toggle}
                            home_team={home_team}
                        />
                        <p>{home_team}</p>
                    </div>
                )
            })
        }
    </Fragment>
  )};

This is what matches data set looks like:

 [{
    match_id: "269568",
    country_id:"22",
    home_team: "Real Kings"
},
{
    match_id: "269569",
    country_id:"22",
    home_team: "Steenberg United"
},
{
    match_id: "269570",
    country_id:"22",
    home_team: "JDR Stars "
},
{
    match_id: "269571",
    country_id:"22",
    home_team: "Pretoria U"
},
]

I am not sure whats going on because the data seems to be passed fine.

<p>{home_team}</p>

in the main component is showing everytime the expected property, however the Modal always shows the last home_team item in the array (e.g.Pretoria U)

Answer 1

you need to call useModal inside of the map function. otherwise you will open on toggle all Modals and the last one overlaps the others

const HomeTeam = ({ match_id, country_id, home_team }) => {
  const {isShowing, toggle} = useModal();

  return (
    <div>
       <p>{match_id}</p>
       <button className="button-default" onClick={toggle}>Show Modal</button>
       <a>{home_team}</a>
       <Modal
         isShowing={isShowing}
         hide={toggle}
         home_team={home_team}
       />
       <p>{home_team}</p>
     </div>
   )
}

const League = ({ league, matches }) => (
  <Fragment>
    <h2>{league}</h2>
    { matches.map((match) => <Hometeam {...match} /> }
  </Fragment>
);