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

};

CodePudding user response：

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 = () => {

    setShowAll(Object.values(dropdowns));
  }

  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

CodePudding user response：

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

CodePudding user response：

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


}