I'm trying to create a simple text box in a pop up window on my application. In order for the user to input text I created a useState variable and during the onChange event I update the state to the value of the input. It's, however, not holding its state. Code below:
const App() {
[units, setUnits] = useState('');
[popUpHtml, setPopUpHtml] = useState('');
...
function handleChange(event){
setUnits(event.target.value);
}
const betslip = (team, line) =>
(
<div className='betslip'>
<h1 className="betslip-header">Betslip</h1>
<div >
<table className="betslip-table">
<tr>
<th>Team</th>
<th>Line</th>
<th>Unit(s)</th>
</tr>
<tr >
<td className='betslip-td'>{team}</td>
<td className='betslip-td'>{linePlusMinus(line)}</td>
<td className='betslip-td'>
<div className='unit-div'>
<input type='text' required className='unit-input' value={units} onChange={(event) => handleChange(event)}/>
</div>
</td>
</tr>
</table>
<table className="betslip-table">
<tr>
<th>Risk</th>
<td className='betslip-td'>{units}</td>
</tr>
<tr>
<th>Reward</th>
<td className='betslip-td'>{reward(units, line)}</td>
</tr>
</table>
</div>
</div>
);
function showPopUp(team, line) {
setPopUpHtml(betslip(team, line));
setPopUpStyle('pop-up-container-show');
}
function PopUp() {
return (
<div id="popUp" className={popUpStyle}>
<div className="pop-up-bg"> </div>
<div className="pop-up">
<img className='close-button' src={closeButton} onClick={hidePopUp.bind(null)} />
{popUpHtml}
</div>
</div>
)
}
...
return (
<div className="container">
<PopUp html={<h1>Hello World </h1>} />
)
I am trying to reassign the state in the tag
setPopUpHtml(betslip(team, line));
Storing JSX elements in state is a really easy way to cause bugs with stale data, as you've discovered. The values in the elements will be locked in at the time you set the state, and will never update again (unless you set state again with new elements).
Instead, your state should be just the minimal pieces of data from which you can tell what should be on the page. And then that data gets used during rendering to choose which elements to display. In your case, the pieces of data seem to be units (already a state variable), team, and line. So add two state variables for team and line:
const [units, setUnits] = useState('');
const [team, setTeam] = useState(null);
const [line, setLine] = useState(null);
Then set them to a non-null value in the showPopup function:
function showPopup(team, line) {
setTeam(team);
setLine(line);
}
And check for their presence when you render:
return (
<div id="popUp" className={team && line ? 'pop-up-container-show' : undefined}>
<div className="pop-up-bg"> </div>
<div className="pop-up">
<img className='close-button' src={closeButton} onClick={hidePopUp.bind(null)} />
{team && line && betSlip(team, line)}
</div>
</div>
);