Here I will be showing a program to make a todo list app using React.
I havent used any npm builders for this project.
First we will go on with the source code of the app.
<!DOCTYPE html>
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>
<div id="mydiv"></div>
<script type="text/babel">
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = {
value: "",
items: [],
};
this.afterSubmit = this.afterSubmit.bind(this);
this.afterChange = this.afterChange.bind(this);
this.removeTodo = this.removeTodo.bind(this);
}
afterChange(e) {
this.setState({
value: e.target.value,
});
}
afterSubmit(e) {
e.preventDefault();
if (this.state.value.length === 0) return;
const newItem = {
value: this.state.value,
id: Date.now(),
};
this.setState((state) => ({
items: state.items.concat(newItem),
value: "",
}));
}
removeTodo(i) {
let items = this.state.items.slice();
items.splice(i, 1);
this.setState({
items,
});
}
render() {
return (
<div>
<h3>TODOS:</h3>
<br />
{this.state.value}
<TodoList items={this.state.items} removeTodo={this.removeTodo} />
<form onSubmit={this.afterSubmit}>
<br />
<label>
What is the plan?
<br />
<input
type="text"
value={this.state.value}
name="listItem"
placeholder="enter TODO item"
onChange={this.afterChange}
/>
<br />
</label>
<br />
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
class TodoList extends React.Component {
deletItem(i) {
this.props.removeTodo(i);
}
render() {
return (
<ul>
{this.props.items.map((item, i) => (
<li key={item.id} value={item.value} className="listItem">
{item.value}
<whitespace />
<input
type="button"
value="X"
onClick={() => {
this.deletItem(i);
}}
/>
</li>
))}
</ul>
);
}
}
ReactDOM.render(<TodoApp />, document.getElementById("mydiv"));
</script>
</body>
</html>
The output of the above cove will be as shown below.
Top comments (0)