How to fix undefined state passed as props, into child component?

Question

I have a parent element which passes its state value, down as props, into its Child component. Now, whenever I try to access the the state of the parent, in the child component(using props), the props value is undefined. (props of child is undefined when I pass it into useState(), but is defined when i console.log() it)

Here's the parent code:




function Parent() {

  const [openModal, setOpenModal] = useState('close-modal')


  const revealStats = (e) => {
    e.preventDefault();
    //open modal state
    setOpenModal('open-modal')
  };

  return (
    <>
     revealStats(event)}>
        
    
    
  );
}

export default Parent;

Here's the childs code:

function ModalClubPages({openModal}) {
    const [modalState,setModalState] = useState(openModal)
    const closeModal = (e) =>{
        e.preventDefault();
        setModalState('close-modal')
    }

  return (
    
        
    
  )
}

export default ModalClubPages

Ori Drori · Answer

When passing the state from the parent to the child via props, you don't need to set a state in the child. In addition, setting it as the initial state useState(openModal) means that changes to the prop openModal won't reflect in the child's state.

Since you want to close the modal (the child) from the modal itself, the child would need to change the state of the parent. To do this, you'll need to pass a function from the parent to the child:

const { useState } = React

function ModalClubPages({ isModalOpen, closeModal }) {
  return (
    
      
    
  )
}

function Parent() {
  const [isModalOpen, setIsModalOpen] = useState(false)

  const revealStats = (e) => {
    e.preventDefault()
    
    setIsModalOpen(true) //open modal state
  };
  
  const hideState = () => {
    setIsModalOpen(false) //close modal state
  }

  return (
    
      
      
    
  );
}

const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render();

How to fix undefined state passed as props, into child component?

1 Answers