Select List not working in ReactJS

Question

I am facing a problem with the select list the onChange event is not being triggered. I can't set the value selected from the select list in this.state variable. Any help will be appreciated.

class SelectActivity extends React.Component{
    render(){
      return (
      <select value={this.props.value} onChange={() =>{this.props.onSelect()}}> {this.props.items.map((item,index) =>{
          return <option value={index}>{item}</option>})}
      </select>
      )
    }
  }
class Form extends React.Component{
  constructor(props){
    super(props)
    this.state = {first:"",last:"",activity:0,restriction:{a:false,b:false,c:false}}
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(event){
    this.setState({[event.target.name]:event.target.value},()=>{console.log(this.state)})
    
  }
  handleCheck(key) {
    return function (event) {
      var restriction = Object.assign({},this.state.restriction);
      restriction[key] = event.target.checked;
      this.setState({restriction:restriction},()=>{console.log(this.state)});
    }.bind(this);
  }
  render(){
    return(
      <form>
        <div>
          First Name<input name="first" value={this.state.first} onChange={this.handleChange}/>
        </div>
        <div>
          Last Name<input name="last" value={this.state.last} onChange={this.handleChange}/>
        </div>
        <div>
          <input type="checkbox" checked={this.state.restriction.a} onChange={this.handleCheck("a")}/>
          <label>a) Dietarty Restriction</label>
        </div>
        <div>
          <input type="checkbox" checked={this.state.restriction.b} onChange={this.handleCheck("b")}/>
          <label>b) Physical Disablities</label>
        </div>
        <div>
          <input type="checkbox" checked={this.state.restriction.c} onChange={this.handleCheck("c")}/>
          <label>c) Medical Needs</label>
        </div>
        <div>
          <SelectActivity name="activity" items={["Science Lab","Swimming","Painting","Cooking"]} value={this.state.activity} onSelect={this.handleChange}/>
        </div>
      </form>                                 
    )
  }
}

ReactDOM.render(
    <Form/>,
    document.getElementById("root")
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
<div id="root"></div>

Raghav Garg · Accepted Answer · 2017-09-02 13:15:38Z

You are not sending the event that is triggered on change of your select input, but you are just calling the function with

onChange={ () => {this.props.onSelect()} }

Also, you didn't have any name assigned to your select input.

Please update your select input to:

<select 
    value={this.props.value} 
    name={this.props.name}
    onChange={this.props.onSelect} // assigning the function, so it can be trigged with all argument
>
    {
        this.props.items.map((item,index) => {
            return <option value={index}>{item}</option>
        })
    }
</select>

class SelectActivity extends React.Component{
    render(){
      return (
      <select value={this.props.value} name={this.props.name} onChange={this.props.onSelect}> {this.props.items.map((item,index) =>{
          return <option value={index}>{item}</option>})}
      </select>
      )
    }
  }
class Form extends React.Component{
  constructor(props){
    super(props)
    this.state = {first:"",last:"",activity:0,restriction:{a:false,b:false,c:false}}
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(event){
    this.setState({[event.target.name]:event.target.value},()=>{console.log(this.state)})
    
  }
  handleCheck(key) {
    return function (event) {
      var restriction = Object.assign({},this.state.restriction);
      restriction[key] = event.target.checked;
      this.setState({restriction:restriction},()=>{console.log(this.state)});
    }.bind(this);
  }
  render(){
    return(
      <form>
        <div>
          First Name<input name="first" value={this.state.first} onChange={this.handleChange}/>
        </div>
        <div>
          Last Name<input name="last" value={this.state.last} onChange={this.handleChange}/>
        </div>
        <div>
          <input type="checkbox" checked={this.state.restriction.a} onChange={this.handleCheck("a")}/>
          <label>a) Dietarty Restriction</label>
        </div>
        <div>
          <input type="checkbox" checked={this.state.restriction.b} onChange={this.handleCheck("b")}/>
          <label>b) Physical Disablities</label>
        </div>
        <div>
          <input type="checkbox" checked={this.state.restriction.c} onChange={this.handleCheck("c")}/>
          <label>c) Medical Needs</label>
        </div>
        <div>
          <SelectActivity name="activity" items={["Science Lab","Swimming","Painting","Cooking"]} value={this.state.activity} onSelect={this.handleChange}/>
        </div>
      </form>                                 
    )
  }
}

ReactDOM.render(
    <Form/>,
    document.getElementById("root")
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
<div id="root"></div>

I was also not passing the using the name attribute from the props in selectActivity. Thanks for the help.

Collectives™ on Stack Overflow

Select List not working in ReactJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related