How can I handle the multiple select box in react in a single state

Question

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",
    })

This might be helpful. Click [here](https://stackoverflow.com/a/61508732/11863236)! — Ranveer Sequeira, Jul 25 '21 at 02:29

Ahmad · Answer 1 · 2021-07-25T09:19:36.743

1

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>
  );
}

edited Jul 25 '21 at 09:19

answered Jul 25 '21 at 05:57

Ahmad

816
2
9
15

Thank you so much, it works but is is possible work with a single handle onchange?? – Rajesh Khadka Jul 25 '21 at 09:02
I need your small help.. will you?? – Rajesh Khadka Jul 27 '21 at 06:54
1

If I can, I will help. – Ahmad Jul 27 '21 at 07:00
Can we just get connected in the google meet ?? plz – Rajesh Khadka Jul 27 '21 at 07:01
1

Sorry I can't. You can send here. – Ahmad Jul 27 '21 at 07:15
Okay thank you, problem solved Thank u so much for responding me.. Plese would you mind to upvote my question :) – Rajesh Khadka Jul 27 '21 at 12:15
hello, mr @Almad.. i have some issue.. When i upload a file from react and express, the uploaded file is moved in public folder and when public folder changes my app reloads. is there any way to solve this issue? – Rajesh Khadka Aug 13 '21 at 03:21
Hi, I don't understand the issue, would you please explain more. – Ahmad Aug 13 '21 at 05:44
yes, Firstly,, user pick up a file from input type file. The file is sent to my express backend and it moves towards the public folder i.e public/Images. The problem is.. when a new file is added in that Images folder my whole react app get reloads. I need to fix that problem. Is there any way to fix it out?? – Rajesh Khadka Aug 14 '21 at 06:33
Yes the problem is : https://stackoverflow.com/questions/64301585/stop-watching-folder-changes-in-reactjs – Rajesh Khadka Aug 28 '21 at 08:45

score 1 · Accepted Answer · answered Nov 30 '22 at 14:08

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>
  );
}

How can I handle the multiple select box in react in a single state

2 Answers2