Change select value in react.js

Question

I need your help !

I'm on a project for my compagny and I should create a select field that can be duplicate with React. So, I have a little problem when I want to save my selection, if I refresh the page, the default option still the same (and not the selected one). There is my code for select.js:

import React, { Component, PropTypes } from 'react';

class Select extends React.Component {

  constructor(props) {
    super(props);
    this.state = {value: ''};

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

  handleChange(data) {
    this.setState({value:data.value});
  }

  render() {
    return (
        <label>
          <select className="widefat" name={this.props.name} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
    );
  }
}

export default Select;

I change the default value :

When i change the select option

After a refresh

I think it's because in select.js It initialize the value to '' and don't save the selection but I don't know how to save the selection.

Answer 1

Here's a way to accomplish this:

import React, { Component, PropTypes } from 'react';

class Select extends Component {

  constructor(props) {
    super(props);
    this.state = { value: props.value }; // can be initialized by <Select value='someValue' />
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  render() {
    return (
        <label>
          <select className="widefat" value={this.state.value} name={this.props.name} onChange={this.handleChange.bind(this)}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
    );
  }
}

export default Select;

Going further

You could iterate in a map in the render method to implement this like so:

  render() {
    const dictionary = [
      { value: 'grapefruit', label: 'Grapefruit' },
      { value: 'lime', label: 'Lime' },
      { value: 'coconut', label: 'Coconut' },
      { value: 'mango', label: 'Mango' }
    ];

    return (
        <label>
          <select
            className="widefat"
            value={this.state.value}
            name={this.props.name}
            onChange={this.handleChange}
          >
            {dictionary.map(
              // Iterating over every entry of the dictionary and converting each
              // one of them into an `option` JSX element
              ({ value, label }) => <option key={value} value={value}>{label}</option>
            )}
          </select>
        </label>
    );
  }

Answer 2

After a long journey to search in documentation and in the depth of internet I found my answer. I forgot to add a "for" for my label. There is my final code :

    import React, { Component, PropTypes } from 'react';

class Select extends React.Component {

  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({value: this.props.value});
  }

  render() {
    return (
        <label htmlFor={this.props.id}>{this.props.label}
          <select defaultValue={this.props.value}  id={this.props.id} className="widefat" name={this.props.name} onChange={this.handleChange.bind(this)}>
            <option>Aucun</option>
            <option value="55">Option 2</option>
            <option value="126">Backend configuration & installation</option>
            <option value="125">Frontend integration</option>
            <option value="124">Graphic Design</option>
          </select>
        </label>
    );
  }
}

export default Select;

Answer 3

The target event property returns the element that triggered the event. It stores a lot of properties, print it to the console, that would familiarize with its capabilities

import React, { Component } from 'react';

class Select extends Component {

  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange = e => this.setState({ value: e.target.value });

  render() {
    return (
     <label>
       <select className="widefat" name={this.props.name} onChange={this.handleChange}>
        <option value="grapefruit">Grapefruit</option>
        <option value="lime">Lime</option>
        <option value="coconut">Coconut</option>
        <option value="mango">Mango</option>
      </select>
    </label>
    );
  }
}

export default Select;