How Handle Multiple Select Form In Reactjs

I try to handle a multiple form select option, in ReactJS. I have tried to be inspire of javascript classic code to handle that, but I fail. My code just don't send me the values

Solution 1:

Of my basic understanding, when you try to handle a Select form element in reactJS you generates an object in HTMLOptionsCollection.

The fundamental root to this object methods and properties is e.target.options.

Your items are stored in e.target.options.value property.

To access to a value stored in the options.value object, you can use the [i] loop value, hence e.target.options[i].value property.

The e.target.options[i].value return strings data types.

Following what I have just said, I assume the objects are stored respecting a number increasing convention as following :

e.target.options[i].value where { [i] : value, [i +1] : value (...)}...

By using e.target.options[i].selected you can control if there is a value stored at a specific location.

e.target.options[i].selected return you a boolean value, useful to handle the code flow.

It's up to you now.

---

Here my code to handle multiple select form in JSX with javascript code :

// Create the React ComponentclassChooseYourCharacterextendsReact.Component{

          // Set the constructorconstructor(props) {
            super(props);
            this.state = {value: 'coconut'};

            // bind the functionsthis.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
          }

          // extract the value to fluently setState the DOM
          handleChange (e) {
            var options = e.target.options;
            var value = [];
            for (var i = 0, l = options.length; i < l; i++) {
              if (options[i].selected) {
                value.push(options[i].value);
              }
            }
            this.setState({value: value});
          }

          // display in client-side the values choosen
          handleSubmit() {
             alert("you have choose :" + this.state.value);

         }


    (...)

Solution 2:

Here is how to get the options selected by the user using a functional component and the useState hook rather than a class component:

importReact, { useState } from"react";

constChooseYourCharacter = function(props) {
    const [selectedFlavors, setSelectedFlavors] = useState([]);

    const handleSelect = function(selectedItems) {
        const flavors = [];
        for (let i=0; i<selectedItems.length; i++) {
            flavors.push(selectedItems[i].value);
        }
        setSelectedFlavors(flavors);
    }

    return (
        <form><selectmultiple={true}value={selectedFlavors}onChange={(e)=> {handleSelect(e.target.selectedOptions)}}>
                <optionvalue="grapefruit">Grapefruit</option><optionvalue="lime">Lime</option><optionvalue="coconut">Coconut</option><optionvalue="mango">Mango</option></select></form>
    );
};

exportdefaultChooseYourCharacter;

Solution 3:

Currently learning React and I noticed this same code on the reactjs.org site. Below is my solution for handling multiple selected options.

1. in the constructor, use an array for the initial value for 'value' in the state
2. in the handleChange method, convert the event target's selectedOptions (HTMLOptionsCollection - array-like) to an array using Array.from(), and use a mapping function to get the value from each item

classChooseYourCharacterextendsReact.Component {

      constructor(props) {
        super(props);
        //this.state = {value: 'coconut'};this.state = {value: ['coconut']};

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }

      handleChange(event) {
        //this.setState({value: event.option});this.setState({value: Array.from(event.target.selectedOptions, (item) => item.value)});
      }

      handleSubmit(event) {
        alert('Your favorite flavor is: ' + this.state.value);
        event.preventDefault();
      }

      render() {
        return (
          <formonSubmit={this.handleSubmit}><label>
              Pick your favorite La Croix flavor:
              <selectmultiple={true}value={this.state.value}onChange={this.handleChange}><optionvalue="grapefruit">Grapefruit</option><optionvalue="lime">Lime</option><optionvalue="coconut">Coconut</option><optionvalue="mango">Mango</option></select></label><inputtype="submit"value="Submit" /></form>
        );
      }
    }
    ReactDOM.render(
             <ChooseYourCharacter/>,
             document.getElementById('root')
    )

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><divid="root"></div>

Solution 4:

As you are using multi-select you should declare your state variable as an array

constructor(props) {
    super(props);
    this.state = {value: []};//This should be an arraythis.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

I have created a blog for reactjs form posting with multi select control. You may go here for more details https://handyopinion.com/git-commands-cheat-sheet/

Solution 5:

I am using react bootstrap 4 here

<Form.Group ><Form.Label>Form Label</Form.Label><Form.Controlas="select"multiple
            // value={formCatState}onChange={(event) => {
              let target = event.target as HTMLSelectElement
              console.log(target.selectedOptions);
            }}
          >
            <option>example cat 1</option><option>Example cat 2</option><option>Example cat 3</option><option>Example cat 4</option></Form.Control><Form.Textmuted> hold ctrl or command for multiple select</Form.Text></Form.Group>