I am trying to put together a MERN stack application and I am currently working on the client-side. React hooks are somewhat new to me and I am currently trying to use them using usePopup from the react-hook-popup library class, but the values won't update and I'm not sure why?
The two lines of relevant code from below I am particularly having trouble updating are:
const [newChore, setNewChore] = useState("") const [newChoreIndex, setNewChoreIndex] = useState(-1) EDIT1: So I have noticed if I setState outside of the popup hook, state will update, which I do for the 'newChoreIndex' hook. Is there something I need to be able to use these hook variables with the popup?
EDIT2: I have repo's to both client-side and server-side which I can share if that makes things easier. After cloning, just run npm i, and then npm start for both applications.
server-side: https://github.com/halsheik/HouseholdHomiesBackend.git client-side: https://github.com/halsheik/HouseholdHomiesFrontend.git
import React, { useState, useEffect } from "react"; import { usePopup } from 'react-hook-popup'; import Axios from "axios"; import "../../stylesheets/modal.css"; import "../../stylesheets/homepage.css"; function HomePage() { const [user, setUser] = useState(null); const [group, setGroup] = useState(null); const [newChore, setNewChore] = useState("") const [newChoreIndex, setNewChoreIndex] = useState(-1) const [showPopup, hidePopup] = usePopup('popup', ({ message, handleClose }) => ( <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() hidePopup() }}> Update Chore </button> </div> </div> </div> )); useEffect(() => { Axios({ method: "GET", withCredentials: true, url: "http://localhost:4000/", }).then((res) => { setUser(res.data); if(!res.data) { window.location.href = "/login"; } }); Axios({ method: "GET", withCredentials: true, url: "http://localhost:4000/group", }).then((res) => { setGroup(res.data); console.log(res); }); }, []) useEffect(() => { console.log(newChore) }, [newChore]) useEffect(() => { console.log(newChoreIndex) }, [newChoreIndex]) const updateChore = () => { }; return ( <div className="mainContainer"> {user ? ( <div className="contentContainer"> <p className="homepageHeading">Welcome resident's of {user.address}</p> {!group ? ( <div className="groupNotSetupContainer"> <p className="groupNotSetup">Household has not been setup</p> <a href="/createGroup" className="groupNotSetupButtonContainer"><button className="groupNotSetupButton">Setup Household</button></a> </div> ) : ( <div className="groupContent"> <div className="groupContentCol"> <p className="groupContentColHeading">Household Members</p> {group.members.map((item, index) => { return ( <div key={index} className="groupContentColMember"> <p className="groupContentColItemText">{item["name"]}</p> </div> ) } )} </div> <div className="groupContentCol"> <p className="groupContentColHeading">Chores</p> {group.chores.map((item, index) => { var member = group.head + parseInt(index) if(member >= group.members.length) { member = 0 } return ( <div key={index} className="groupContentColChore"> {item === "organizer" ? ( <div className="groupContentColChoreInner"> <p className="groupContentColItemText">{item}</p> <p className="groupContentColItemText assignedChore">{group.members[member]["name"]}</p> </div> ) : ( <div className="groupContentColChoreInner"> <p className="groupContentColItemText killCurves">{item}</p> <p className="groupContentColItemText assignedChore">{group.members[member]["name"]}</p> </div>)} {item !== "organizer" && <p href="#" className="groupContentColChoreEdit" onClick={() => { setNewChoreIndex(index) showPopup(item) }}>Edit</p> } </div> ) } )} </div> </div> )} </div> ) : ( // should not enter here <div> <h1>Welcome to household homies, please login</h1> <p><a href="/login">login</a></p> <p><a href="/register">register</a></p> </div> )} </div> ); } export default HomePage; 
EDIT 4:
Popup hook
const [showPopup, hidePopup] = usePopup('popup', ({ message, chore, handleClose }) => ( <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 {chore}</p> <input className="newChoreInput" placeholder="New Chore" onChange={(e) => {setNewChore(e.target.value)}} /> <button className="modalSubmit" onClick={() => { console.log(chore) updateChore() hidePopup() }}> Update Chore </button> </div> </div> </div> )); hook call
showPopup(item, newChore) EDIT 5:
Before clicking 'edit' to open popup: 
After opening popup (notice a blank and -1 in the console indicating the newChore and newChoreIndex passed in)
After typing in input field of popup (notice the console with 5 blanks since I console.logged the newChore value in the popup which still has no value)
After closing the popup and reopening (notice the values of newChore and newChoreIndex have updated)
