<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.