How to send value to state using react bootstrap FormControl dropdown?

Question

I am using React-Bootstrap FormControl dropdown. In this DD I applied map function which iterates and provides the dropdown options.

I am not getting how to set the value of selected option. I tried to use onChange and onSelect. On change I called following line of code: Below is simple example of drop which is used in Reactjs using React-Bootstrap:

export default class SignUp extends Component {

constructor(props, context) { super(props, context);

this.handleChange = this.handleChange.bind(this);
this.register =this.register.bind(this);
this.handleChangeDate = this.handleChangeDate.bind(this);

this.state = {
 gender:'',
 genderCat: [],
}
handleChangeGender(){
  const name = e.target.name;
  const value = e.target.value;
  console.log(name, value);
  this.setState({[name]: value});
  console.log(this.state);   
}

 componentDidMount() {
api to get gender => GetData('getGender').then( (result) => {
    this.setState({
      genderCat: result

      });
    // this.state.data = result.message_text;
    // console.log(data.message_text);
})    



 render() {
                <FormControl
                    name="gender"
                    componentClass="select"
                    placeholder="select"
                    onChange={this.handleChangeGender}
                  >

                      {
                        this.state.genderCat.map((data) =>
                        <option key={data.id} value={data.value}  > 
                         {data.name}</option>
                        )
                      } 
                        <FormControl.Feedback />
                    </FormControl>  
   }
  }

How to set state value here ? I am getting one step behind state value.Like for very first time if I select Male (coming from map function, its value is 1) then then in state its give null, but then onchange female its taking 1, now if I change to other then its takes 2 ( its value of female)

Answer 1

I don't know why you can't do it but here is a working example from documentation without validation and with a little bit change:

import React from "react";
import { FormGroup, ControlLabel, FormControl } from "react-bootstrap";

const genderList = [
  { id: 1, name: "male" },
  { id: 2, name: "female" },
  { id: 3, name: "other" }
];

// mimicing API request
const getGender = () =>
  new Promise(resolve =>
    setTimeout(() => {
      resolve(genderList);
    }, 1000)
  );

class FormExample extends React.Component {
  state = {
    gender: "",
    genderCat: []
  };

  componentDidMount() {
    getGender().then(data =>
        this.setState({ genderCat: data, gender: data[ 0 ].name }));
  }

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

  createOptions = () =>
    this.state.genderCat.length
      ? this.state.genderCat.map(data => (
          <option key={data.id} value={data.name}>
            {data.name}
          </option>
        ))
      : "";

  render() {
    return (
      <form>
        <p>
          Selected gender: <strong>{this.state.gender}</strong>
        </p>
        <FormGroup controlId="formControlsSelect">
          <ControlLabel>Select</ControlLabel>
          <FormControl
            name="gender"
            componentClass="select"
            onChange={this.handleChange}
          >
            {this.createOptions()}
          </FormControl>
        </FormGroup>
      </form>
    );
  }
}

export default FormExample;