Return to Answer

added 1696 characters in body

edited Nov 15, 2021 at 0:02

* UPDATE

Seeing as you're only using newChore inside the popup, you could try moving the useState call for newChore inside of the popup body then passing it to the updateChore function like this

const [showPopup, hidePopup] = usePopup('popup', ({ message, handleClose }) => { const [newChore, setNewChore] = useState(""); useEffect(() => { console.log(newChore); }, [newChore]); return ( <div className="modal"> <div className="modalInner"> <button className="modalClose" onClick={handleClose}> X </button> <div className="modalInner2"> <p className="modalHeading">Previous Chore(s)</p> <p className="modalChore">{message}</p> <p className="modalHeading">New Chore {newChoreIndex}</p> <input className="newChoreInput" placeholder="New Chore" onChange={(e) => {setNewChore(e.target.value)}} /> <button className="modalSubmit" onClick={() => { updateChore(newChore) hidePopup() }}> Update Chore </button> </div> </div> </div> ) });

This will stop the useEffect on setChore working outside of the popup though as it's not in scope, so you'll probably have to move that into the popup as well to see if it's updating on change.

* UPDATE

Seeing as you're only using newChore inside the popup, you could try moving the useState call for newChore inside of the popup body then passing it to the updateChore function like this

const [showPopup, hidePopup] = usePopup('popup', ({ message, handleClose }) => { const [newChore, setNewChore] = useState(""); useEffect(() => { console.log(newChore); }, [newChore]); return ( <div className="modal"> <div className="modalInner"> <button className="modalClose" onClick={handleClose}> X </button> <div className="modalInner2"> <p className="modalHeading">Previous Chore(s)</p> <p className="modalChore">{message}</p> <p className="modalHeading">New Chore {newChoreIndex}</p> <input className="newChoreInput" placeholder="New Chore" onChange={(e) => {setNewChore(e.target.value)}} /> <button className="modalSubmit" onClick={() => { updateChore(newChore) hidePopup() }}> Update Chore </button> </div> </div> </div> ) });

This will stop the useEffect on setChore working outside of the popup though as it's not in scope, so you'll probably have to move that into the popup as well to see if it's updating on change.

Source Link

answered Nov 14, 2021 at 22:12

Danny Pearson

I can't comment because I've only just made an account

That being said I can update this answer if you can provide a bit more information :)

Where are you checking for the result of the new chore being set? I can see in the code you posted that there's the new chore index being logged in the updateChore function but not the newChore itself. Have you tried logging in another useEffect? like...

useEffect(() => { console.log(newChore); }, [newChore]);

Collectives™ on Stack Overflow

Return to Answer