React Todo object not valid as react child

JavaScript
1

I have been going through react, and I am stuck on this. I am trying to add a new todo to the list. Right now, everything renders but when I click the add todo button everything disappears. Looking at the console I get an error "react-dom.development.js:13231 Uncaught Error: Objects are not valid as a React child (found: object with keys {newTodo}). If you meant to render a collection of children, use an array instead.

Todolist component

import React, {Component} from "react";
import Newtodo from "./Addtodo";

class Todolist extends Component{
    constructor(props){
        super(props);
        this.state = {
            todo: ["Walk the dog", "Feed the fish", "Wash car"]
        };
    }
    addTodo = (todo) => {
        this.setState(st => ({
            todo: [...st.todo, todo]
        }))
    }
    render(){
        return(
            <div>
                <h1>Todo List</h1>
                <ul>
                    {this.state.todo.map(todos => (
                        <li>{todos} <button>Edit</button> <button>Delete</button></li>
                        
                    ))}
                </ul>
                <Newtodo addTodo = {this.addTodo}/>
            </div>
        )
    }
}
export default Todolist;

Addtodo component

import React, {Component} from "react";

class Addtodo extends Component{
    constructor(props){
        super(props);
        this.state = {
            newTodo: ""
        }
    }
    handleChange = (evt) => {
        this.setState({
            [evt.target.name] : evt.target.value
        });
    }
    handleSubmit = (evt) => {
        evt.preventDefault();
        this.props.addTodo(this.state)
    }
    render(){
        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <label>New Todo:</label>
                    <input
                    type="text"
                    name="newTodo"
                    id="newTodo"
                    value = {this.state.newTodo}
                    onChange = {this.handleChange}
                    />
                    <button>Add todo</button>
                </form>
            </div>
        )
    }
}
export default Addtodo;
2

Got it working with the changes

todo list component

import React, {Component} from "react";
import Newtodo from "./Addtodo";

class Todolist extends Component{
    constructor(props){
        super(props);
        this.state = {
            todo: [
                {task:"feed fish"},
                {task:"wash car"}
            ]
        }
    }
    addTodo = (todo) => {
        this.setState(st => ({
            todo: [...st.todo, todo]
        }))
    }
    render(){
        return(
            <div>
                <h1>Todo List</h1>
                <ul>
                    {this.state.todo.map(todos => (
                        <li>{todos.task} <button>Edit</button> <button>Delete</button></li>
                        
                    ))}
                </ul>
                <Newtodo addTodo = {this.addTodo}/>
            </div>
        )
    }
}
export default Todolist;

add todo component

import React, {Component} from "react";

class Addtodo extends Component{
    constructor(props){
        super(props);
        this.state = {
            task:""
        }
    }
    handleChange = (evt) => {
        this.setState({
            [evt.target.name] : evt.target.value
        });
    }
    handleSubmit = (evt) => {
        evt.preventDefault();
        this.props.addTodo(this.state)
    }
    render(){
        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <label>New Todo:</label>
                    <input
                    type="text"
                    name="task"
                    id="task"
                    value = {this.state.task}
                    onChange = {this.handleChange}
                    />
                    <button>Add todo</button>
                </form>
            </div>
        )
    }
}
export default Addtodo;
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.