Triyng to add some text when clicking on submit with React

Question

SEE PICTURECan someone please help me to figure out why when I clicked on Submit I have just a new tab showing and not the text. i have attached a picture so you can see what's showing when I clicked on the submit button.

import React, { Component } from 'react'
export default class TodoList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            todo:"",
            completed: "",
            itemList: [
                { todo: "Take out the Trash", completed: true },
                { todo: "Water the plants", completed: false },
                { todo: "Grocery shopping", completed: true }
              ]
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }
    handleChange(e) {
        this.setState({todo: e.target.value});
    }
    handleSubmit(n) {
       this.setState({
           itemList: [...this.state.itemList, this.state.todo],
       });
    }
    render() {
        return (
            <div className="container">
                <div className="main">
                    <div>
                 <input className="header w-50 p-2" type="text" placeholder="enter task" value={this.state.todo} onChange={this.handleChange}/><br></br>
                 <button className="button btn-btn-primary ml-1 mt-3" onClick={this.handleSubmit}>Submit</button>
                 </div>
                 <div>
        {this.state.itemList.map((item, index) => (<p className="mt-4 list" key={index}>{item.todo}{item.completed} <input type="checkbox" /></p>))}
                 </div>
                 </div> 
                 </div>
        )
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

to figure out why when I clicked on Submit I have just a new tab showing and not the text

Answer 1

you need put the full object into state like below:

this.setState({
            itemList: [...this.state.itemList, {todo: this.state.todo, completed: true}],
        });

Here is the full example:

import React, {Component} from 'react'

export default class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            todo: "",
            completed: "",
            itemList: [
                {todo: "Take out the Trash", completed: true},
                {todo: "Water the plants", completed: false},
                {todo: "Grocery shopping", completed: true}
            ]
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(e) {
        this.setState({todo: e.target.value});
    }

    handleSubmit(n) {
        this.setState({
            itemList: [...this.state.itemList, {todo: this.state.todo, completed: true}],
        });
    }

    render() {
        return (
            <div className="container">
                <div className="main">
                    <div>
                        <input className="header w-50 p-2" type="text" placeholder="enter task" value={this.state.todo}
                               onChange={this.handleChange}/><br></br>
                        <button className="button btn-btn-primary ml-1 mt-3" onClick={this.handleSubmit}>Submit</button>
                    </div>
                    <div>
                        {
                            console.log(this.state.itemList, 'list')
                        }
                        {this.state.itemList.map((item, index) => (
                            <p className="mt-4 list" key={index}>{item.todo}{item.completed} <input type="checkbox"/>
                            </p>))}
                    </div>
                </div>
            </div>
        )
    }
}