Question

92

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

rated 0 times [ 97] [ 5] / answers: 1 / hits: 15995 / 6 Years ago, mon, april 16, 2018, 12:00:00

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)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

casandra

Add To Favorites

Follow

Total Points: 334

Total Questions: 93

Total Answers: 104

Location: Denmark

Member since Tue, Jul 19, 2022

2 Years ago

answered 6 Years ago rohan · Accepted Answer

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;