Modal Component And Props Not Working Properly

Yesterday I asked a question about sending different sets of data to a Modal component based on which button was clicked. (Link to Question) I have made some changes and have run i

Solution 1:

First, the way you pass functions to the child component is wrong. It should be something like :

const PageComponent = () => {
  const handleClickOnButton = () => {
    console.log('clicked');
  }

  return ( 
    <Button handleClick={handleClickOnButton}>;
  )
}

const ButtonComponent = (props) => {
  return (
    <button onClick={props.handleClick}>;
  )
}

Then, i would recommend to add a state in your parent component just to manage the opening/closing of the modal. Something like :

  const [modalOpen, setModalOpen] = useState(false);

and you add conditionnal statement checking this state to know if you show your modal or not :

  { modalOpen &&
    <ServiceModal
      show={selectedService !== null}
      close={closeModal}
      serviceInfo={SERVICES_INFO[selectedService]}
    />
  }

It may won't solve everything, but that's a good start i would say

Solution 2:

You are trying to render an object on your modal component, and React can't render objects. What you should change is:

 <h2> {props.serviceInfo.title} </h2>
 <main> {props.serviceInfo.desc} </main>
 

As those are strings, they can be rendered