My initial State
const [state,setState] = useState({
country : "",
nationality : "",
})
My first select tag :
<select> //select for country
<option>Nepal<option/>
<option>USA<option/>
</select>
My second select tag :
<select> //select for nationality
<option>Nepali<option/>
<option>Ameracain<option/>
</select>
At the end , I need all the selected values of both select tag in the single state.
const [state,setState] = useState({
country : "Nepal",
nationality : "Nepali",
})
You can use the name property and then use the multiple handle function in the React doc
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [state, setState] = useState({
country: "Nepal",
nationality: "Nepali"
});
const handleChange = (e) => {
const {name,value}= e.target
setState({...state,[name]:value})
};
return (
<div className="App">
<select name="country" value={state.country} onChange={handleChange}>
//select for country
<option>Nepal</option>
<option>USA</option>
</select>
My second select tag :
<select name="nationality" value={state.nationality} onChange={handleChange}>
//select for nationality
<option>Nepali</option>
<option>Americain</option>
</select>
{JSON.stringify(state)}
</div>
);
}
here is a sample based on your example
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [state, setState] = useState({
country: "Nepal",
nationality: "Nepali"
});
const handleChange = (e) => {
const copy = { ...state };
switch (e.target.name) {
case "country":
copy.country = e.target.value;
break;
case "nationality":
copy.nationality = e.target.value;
break;
default:
break;
}
setState(copy);
};
return (
<div className="App">
<select name="country" onChange={handleChange}>
//select for country
<option>Nepal</option>
<option>USA</option>
</select>
My second select tag :
<select name="nationality" onChange={handleChange}>
//select for nationality
<option>Nepali</option>
<option>Ameracain</option>
</select>
{JSON.stringify(state)}
</div>
);
}
