When using a controlled HTML tag in React.
About the snippet below:
Why this works:
OPTION #1
As correct as ravibagul91 is, I think you are taking a convoluted route to do a relatively simple thing and you aren't really taking advantage of how state actually works.
First, are you getting anything out of having propB in the same state object as propA? From the code, it doesn't seem like it and it's not a bad idea to manage propA and propB in separate states.
That said, you can call the set method for a state directly from the select because it doesn't appear like you need to know anything about the previous state.
function App() {
const [propA,setPropA] = React.useState('');
const [propB,setPropB] = React.useState('');
return(
Prop A: {propA}
Prop B: {propB}
);
}
ReactDOM.render( , document.getElementById('root'));
Much easier to read, understand, and maintain IMO.