How to get selected values from multiple dropdowns on button click using ReactJs

Question

I want to console.log() multiple values from five different dropdowns on a button click. I have done this for one dropdown, but I don't know how to do it for more. I'm still a beginner.

Here's my code:

export default function Suma() {

  const typedemande = [
    { value: "first", label: "first" },
    { value: "second", label: "second" },
    
  ];

  const [message, setMessage] = useState('');
  

  const handleChange = event => {
    setMessage(event);
  };

  const handleClick = event => {
    event.preventDefault();
    console.log(message);
  };


  return (
    <div>
      <div className="col-lg">

        <Select placeholder="choose" id="message" className="react-dropdown "  name="message" onChange={handleChange}

          value={message}
          isClearable
          isSearchable={false}
          classNamePrefix="dropdown"
          options={typedemande}

        />

      </div>
      <div className="text-center">
        <button className="mr-2 btn btn-primary" onClick={handleClick}>Click me</button>
      </div>
    </div>
  );

};

SKG · Accepted Answer · 2022-05-23 05:57:07Z

1

I hope you are looking for this one:


export default function App() {
  const typedemande = [
    { value: "first", label: "first" },
    { value: "second", label: "second" },
    { value: "third", label: "third" },
    { value: "fourth", label: "fourth" },
    { value: "five", label: "five" },

  ];

  const [showAll, setShowAll ] = useState([]);

  const [dropdowns,setDrodowns] = useState({
    'message1': '',
    'message2': '',
    'message3': '',
    'message4': '',
    'message5': '',
  });

  const handleChange = (event) => {
      setDrodowns({...dropdowns,[event.target.name]:event.target.value});
  }

  const handleClick = (event) => {
    event.preventDefault(); // if you use the element inside `form` then it would prevent to submit
    console.log(dropdowns);//to log the values in console
    setShowAll(Object.values(dropdowns));// to show the changes in UI
  }

  return (
    <div>
      <div className="col-lg">

        <Select
          name="message1"
          onChange={handleChange}
          value={"second"}
          options={typedemande}
        />
        <Select
          name="message2"
          onChange={handleChange}
          value={"second"}
          options={typedemande}
        />
        <Select
          name="message3"
          onChange={handleChange}
          value={"second"}
          options={typedemande}
        />
         <Select
          name="message4"
          onChange={handleChange}
          value={"second"}
          options={typedemande}
        />
         <Select
          name="message5"
          onChange={handleChange}
          value={"second"}
          options={typedemande}
        />

      </div>
      <hr/>
      <ul>
        { showAll.map((val,i)=><li key={i}>{i+1} --- {val}</li>) }
      </ul>
      <hr/>
      <div className="text-center">
        <button className="mr-2 btn btn-primary" onClick={handleClick}>Click me</button>
      </div>
    </div>
  );
}

For details check the code sandbox link

Out put

Edit: Based on user comments I edited the answer

edited May 23, 2022 at 5:57

answered May 22, 2022 at 19:36

SKG

644 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Andy Over a year ago

FYI there is a snippet you can use to secure the code on this site rather than codesandbox.

SKG Over a year ago

@Andy thanks, next time definitely I will use that

soulayka Over a year ago

@SKG I tried the code, it gets the job done, but how can I just log the values without getting them in a ul, and also I have a problem, it refreshes on button click, I see the values for 1 second and it refreshes,

SKG Over a year ago

@soulayka I have edited the answer, check the handleClick function, if you don't want to see the changes in UI then remove the 3rd line.

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

axtck · Accepted Answer · 2022-05-22 19:03:15Z

0

You could pass a parameter to your handleChange.

const handleChange = (event, position) => {
  console.log(position);
};

<Select onChange={(e) => handleChange(e, 1)} />
<Select onChange={(e) => handleChange(e, 2)} />
<Select onChange={(e) => handleChange(e, 3)} />

answered May 22, 2022 at 19:03

axtck

3,9753 gold badges17 silver badges32 bronze badges

2 Comments

soulayka Over a year ago

But I want to pass the value selected not the position, how can I do that?

axtck Over a year ago

Use event.target.value

Ahmet Firat Keler · Accepted Answer · 2022-05-22 19:19:45Z

Improving axtck's answer, you can get each select value like below

import React, {useState} from 'react';
import Select from 'react-select';

export function App(props) {


  const typedemande = [
    { value: "first", label: "first" },
    { value: "second", label: "second" },
    
  ];

  const [messages, setMessages] = useState([]);
  

  const handleChange = (event, pos) => {
    console.log(pos)
    console.log(event.value)
    let mz = [...messages];
    if (mz.length > 0 && mz.findIndex(msg => msg.index == pos) > -1) {
      mz[mz.findIndex(msg => msg.index == pos)] = event.value;

      setMessages(mz);
    }
    else {
      mz.push({
        index: pos,
        value: event.value
      });

      setMessages(mz);
    }
  };

  const handleClick = event => {
    event.preventDefault();
    for (let i = 0; i < messages.length; i++)
      console.log(messages[i].value)
  };


  return (
    <div>
      <div className="col-lg">

        <Select placeholder="choose" id="message" className="react-dropdown "  name="message" onChange={(e) => handleChange(e, 1)}

          value={messages[0] ? messages[0].label : ''}
          isClearable
          isSearchable={false}
          classNamePrefix="dropdown"
          options={typedemande}

        />

        <Select placeholder="choose" id="message" className="react-dropdown "  name="message" onChange={(e) => handleChange(e, 2)}

          value={messages[1] ? messages[1].label : ''}
          isClearable
          isSearchable={false}
          classNamePrefix="dropdown"
          options={typedemande}

        />

      </div>
      <div className="text-center">
        <button className="mr-2 btn btn-primary" onClick={handleClick}>Click me</button>
      </div>
    </div>
  );


}

Collectives™ on Stack Overflow

How to get selected values from multiple dropdowns on button click using ReactJs

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related