Reputation: 269
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:
Thank you for any constructive feedback.
Upvotes: 4
Views: 4284
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.
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.
function component
for our select node
const SelectBox = ({ children, onChange, value }) => (
<select onChange={onChange} value={value}>
{children}
</select>
);
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>
);
}
}
Upvotes: 2