So I have been having a bit of difficulty handling react. I have tried to do a simple to-do list app on codepen, but unfortunately I can’t get it to work properly. I can’t find out how to show the items array, all that is seen is an empty ordered list with “submit” in there for some reason . There is also two bullets for every click of the submit button, which there should only be one. The console.log also shows that the app also won’t save the list items on the first click of the submit button(which I tried to program it to do). Here is a link to the project
Thanks. Here is the javascript if you just want to see that
var newItem;
class Box extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '',
items: []
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
this.setState({
items: this.state.items.concat([this.state.value]),
})
var newItem = {
text: this._inputElement.value,
key: Date.now()
};
console.log(this.state.items)
event.preventDefault();
this.setState((prevState) => {
return {
items: prevState.items.concat(newItem)
};
});
this._inputElement.value = "";
}
render() {
return (
<div className="box">
<form onSubmit={this.handleSubmit}>
<h2 className="display-2">To-do List App</h2>
<input type="text" value={this.state.value} onChange={this.handleChange} size="50" />
<input type="submit" value="Submit" className="btn btn-primary" ref={(a) => this._inputElement = a} />
</form>
<div>
<TodoItems entries={this.state.items}/>
</div>
</div>
);
}
}
class TodoItems extends React.Component {
createTasks(item) {
return <li key={item.key}>{item.text}</li>
}
render() {
var todoEntries = this.props.entries;
var listItems = todoEntries.map(this.createTasks);
return (
<ul className="theList">
{listItems}
</ul>
);
}
};
ReactDOM.render(<Box />, document.getElementById('app'));