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