Problem: For some reasons my submittedSev
state does not seem to re-render in the DOM upon calling it's state updating function setSubmittedSev()
. However, I can see console logs renders for sev
parameter. Why is this happening?
Expected outcome – I expect the popup component to re-render upon calling submittedSev()
function. And so for my text stored in data variable to also update.
popup.tsx
const App: React.FC<{}> = () => {
const [submittedSev, setSubmittedSev] = useState('High');
const data = [{
title: 'Title example',
summary: 'Summary Example',
body: `${submittedSev}`,
sevChange: true
}
]
const selectOptionHandler = (index) => {
setCurrentOption(data[index]);
};
const submittedSevChangeHandler = (sev) => {
setSubmittedSev(sev); // Not triggering re-render
console.log(sev) // Correctly logs to the console
};
return (
<div className="App">
<aside>
<ResponseList
onSelectOption={selectOptionHandler}
responseData={data}
/>
</aside>
<main>
<ResponseDetail
details={currentOption}
onChangeSubmittedSevHandler={submittedSevChangeHandler}
/>
</main>
</div>
);
};
ResponseDetail.tsx - Child component
const ResponseDetail = (props) => {
const submittedSevUpdateChangeHandler = (e) => {
props.onChangeSubmittedSevHandler(e.target.value);
};
return (
<select onChange={submittedSevUpdateChangeHandler}>
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
</select>
)
}