<div id="body"></div>
<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>
class App extends React.Component {
constructor() {
super();
this.state = {
tasksDb: [
{
id: 1,
title: 'title',
description: 'description'
}
],
tasks: []
}
this.task_create = this.task_create.bind(this);
}
task_create() {
let random = Math.floor(Math.random() * (999 - 1 + 1)) + 1;
this.state.tasksDb.push({id: random, title: 'title', description: 'description'});
this.setState({
tasksDb: this.state.tasksDb,
tasks: this.state.tasksDb.map((task) => {
return <li>id: {task.id} | {task.title} | {task.description}</li>;
})
});
}
render() {
return <div>
<p><input type="button" value="Добавить задачу" onClick={this.task_create}/></p>
<ul>{this.state.tasks}</ul>
</div>;
}
}
ReactDOM.render(<App/>, document.getElementById('body'));
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.