Ben Swindells
Ben Swindells

Reputation: 269

Getting Select Value Using React

Trying to access Bootstraps select form value using React props. This is what i've tried so far but it doesn't store the options value.

Example Code:

class BottomBar extends React.Component {

  constructor(props) {
    super(props);
    this.state =  {
      hidden: true,
      items: [],
      text: '',
      priority: ''
    };

    this.handleClick = this.handleClick.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handlePriority = this.handlePriority.bind(this);
  };
  handleChange(e) {
    this.setState({text: e.target.value});


  }
  handlePriority(t) {
    this.setState({priority: t.target.value});
  }
  handleSubmit(e) {
    e.preventDefault();
    if(!this.state.text.length) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now(),
      priority: this.state.priority
    };
    this.setState(state => ({items: state.items.concat(newItem), text: '', priority: ''}));
    console.log(newItem);
  }

  handleClick(t) {
    i++;
    if(i === 1) {
        this.setState({hidden: false});
    } else if(i === 2) {
        this.setState({hidden: true});
        i = 0;
    }

  }
  render() {
    const { classes } = this.props;
    return(

      <React.Fragment>
        <AddCard items={this.state.items} id={this.state.id} priority={this.state.priority} item={this.state.item}/>
        <CssBaseline />
        <AppBar position="fixed" color="primary" className={classes.appBar}>
          {!this.state.hidden ? <TodoList text={this.state.text} handlePriorty={this.handlePriorty} priority={this.state.priority} handleSubmit={this.handleSubmit} items={this.state.items} handleChange={this.handleChange}/> : null}
          <Toolbar className={classes.toolbar}>
            <IconButton color="inherit" aria-label="Open drawer">
              <MenuIcon />

            </IconButton>
            <a href="#" onClick={this.handleClick}>
            <Button variant="fab" color="secondary" aria-label="Add" className={classes.fabButton}>
              <AddIcon />
            </Button>
            </a>     
            <div>

              <IconButton color="inherit">
                <SearchIcon />
              </IconButton>
              <IconButton color="inherit">
                <MoreIcon />
              </IconButton>
            </div>

          </Toolbar>
        </AppBar>
      </React.Fragment>
    );
  }

}

class TodoList extends React.Component {

  render() {
    return(
      <div className="container">

      <form onSubmit={this.props.handleSubmit}>
        <div className={"form-group"}>
          <label htmlFor={"title"}>Enter A Task Title</label>
          <input value={this.props.text} onChange={this.props.handleChange} type="text" className={"form-control"} id="title" rows="3"></input>
        </div>
        <div className={"form-group"}>
            <label htmlFor={"exampleFormControlSelect1"}>Example select</label>
              <select onChange={this.props.handlePriority} className={"form-control"} id="exampleFormControlSelect1">
                <option value={this.props.priority} onChange={this.props.handlePriority}>Low Priority</option>
                <option value={this.props.priorty} >Medium Priority</option>
                <option value={this.props.priorty} >High Priority</option>
                <option value={this.props.priorty} >Important</option>
                <option value={this.props.priorty} >Very Important</option>
              </select>
            </div>
        <button className={"btn btn-primary btn-custom"}>Add : {this.props.items.length + 1}</button>
      </form>
    </div>
    );
  }
}

My code contains two classes one of them is setting the stored values in states and my second class is accepting these states through props. My text input works fine, but my select / options selector doesn't seem to save the value selected.

Output:

enter image description here

enter image description here

Thank you for any constructive feedback.

Upvotes: 4

Views: 4284

Answers (1)

dschu
dschu

Reputation: 5362

I highly recommend you to split your code into smaller functions. In particular, I would recommend a class component as a wrapper and function components for your select & option nodes.

First, lets create a function component for the option node

const Option = ({ value, description }) => (
  <option value={value}>{description}</option>
);

As you can see, it takes 2 arguments: value & description. Feel free to add your own.

Then, lets create a function component for our select node

const SelectBox = ({ children, onChange, value }) => (
  <select onChange={onChange} value={value}>
    {children}
  </select>
);

And as last step, we put it all together:

class App extends React.Component {
  state = {
    value: 2
  };

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

  render() {
    return (
      <div className="App">
        <SelectBox onChange={this.handleChange} value={this.state.value}>
          <Option value="1" description="First Item" />
          <Option value="2" description="Second Item" />
          <Option value="3" description="Third Item" />
        </SelectBox>
      </div>
    );
  }
}

Link to codebox

Upvotes: 2

Related Questions