React: TodoList: Give an Input to an Array-CodePudding

I am currently working on a React Todo app. I'm still a React beginner, I've watched all kinds of tutorials but I can't find a solution to my problem.

I'm trying to process the text field (describtion) so that it creates a new array Element.

I pass the describtion into the function createTodo. There, a new object is created that contains the describtion and an id. This object is then pushed into the array TODOS. My problem is that the describtion is undefined every time.

Please help and thank you:)

Translated with www.DeepL.com/Translator (free version)

import React from 'react';
import ReactDOM from 'react-dom';

class TodoTable extends React.Component {

  
  constructor(props){
    super(props);
    this.state = {
      enterTodo: '',
      status: false

      
    }
    this.handleEnterTodo = this.handleEnterTodo.bind(this);
    this.handleStatus = this.handleStatus.bind(this);
    this.createTodo = this.createTodo.bind(this);
  }
  

  handleEnterTodo(event){
    this.setState({
      enterTodo: this.props.value
      
      
    });
    
  }
  handleStatus(event){
    this.setState({
      status: this.props.true
    });
  }

  createTodo(event){
    const todo = {
      id: 5,
      describtion: this.props.enterTodo
      
    }
    TODOS.push(todo);
    console.log(this.props.enterTodo);
  }
  
  render(){
    
    const todos = this.props.todos;
              //Gibt handleListener Funktionen an Child Komponente als Props weiter
    return(
      <>
      <InputBar createTodo={this.createTodo} handleEnterTodo={this.handleEnterTodo} enterTodo={this.state.enterTodo}/>
      <Todo handleStatus={this.handleStatus} status={this.state.status} todos={todos} />
      </>
      
    );
  }
}

class InputBar extends React.Component {
  

  
  render(){
    
    return(
      <form>
        <input type='text' placeholder='Type in a Note' 
          value={this.props.enterTodo}
          onChange= { this.props.handleEnterTodo }
        />
        <button type='button' onClick={this.props.createTodo}>Enter</button>
        <button>Clear Done</button>
      </form>
    );
  }
}




class Todo extends React.Component {
  render(){
    
    const todoList = [];

    this.props.todos.forEach((element, index) => {
      let todo = <div><form>{this.props.todos[index].describtion}<input type='checkbox' checked={this.props.status} onChange={this.props.handleStatus} /></form></div>;
      todoList.push(todo);
    })

    return(
      todoList
    );
  }
}

//Mockdaten

let TODOS = [
  {
    id: 0,
    describtion: 'Work more',
    status: 'open'
  },
  {
    id: 1,
    describtion: 'Sleep more',
    status: 'open'
  },
  {
    id: 2,
    describtion: 'Drink less',
    status: 'done'
  },
  {
    id: 3,
    describtion: 'Learn more',
    status: 'done'
  },
];

//Render App

ReactDOM.render(
  
    <TodoTable todos={TODOS} />,
  
  document.getElementById('root')
);

CodePudding user response：

Try this approach,

import "./styles.css";

import React from "react";

let TODOS = [
  {
    id: 0,
    describtion: "Work more",
    status: "open"
  },
  {
    id: 1,
    describtion: "Sleep more",
    status: "open"
  },
  {
    id: 2,
    describtion: "Drink less",
    status: "done"
  },
  {
    id: 3,
    describtion: "Learn more",
    status: "done"
  }
];
export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <TodoTable todos={TODOS} />
    </div>
  );
}

class TodoTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      enterTodo: "",
      todos: this.props.todos,
      status: false
    };
    this.handleEnterTodo = this.handleEnterTodo.bind(this);
    this.handleStatus = this.handleStatus.bind(this);
    this.createTodo = this.createTodo.bind(this);
  }

  handleEnterTodo(event) {
    this.setState({
      enterTodo: event.target.value
    });
  }
  handleStatus(event) {
    this.setState({
      status: this.props.true
    });
  }

  createTodo(event) {
    const todo = {
      id: 5,
      describtion: this.state.enterTodo
    };
    this.setState({
      todos: [...this.state.todos, todo]
    });
  }

  render() {
    const todos = this.state.todos;
    //Gibt handleListener Funktionen an Child Komponente als Props weiter
    return (
      <>
        <InputBar
          createTodo={this.createTodo}
          handleEnterTodo={this.handleEnterTodo}
          enterTodo={this.state.enterTodo}
        />
        <Todo
          handleStatus={this.handleStatus}
          status={this.state.status}
          todos={todos}
        />
      </>
    );
  }
}

class InputBar extends React.Component {
  render() {
    return (
      <form>
        <input
          type="text"
          placeholder="Type in a Note"
          value={this.props.enterTodo}
          onChange={this.props.handleEnterTodo}
        />
        <button type="button" onClick={this.props.createTodo}>
          Enter
        </button>
        <button>Clear Done</button>
      </form>
    );
  }
}

class Todo extends React.Component {
  render() {
    const todoList = [];

    this.props.todos.forEach((element, index) => {
      let todo = (
        <div>
          <form>
            {this.props.todos[index].describtion}
            <input
              type="checkbox"
              checked={this.props.status}
              onChange={this.props.handleStatus}
            />
          </form>
        </div>
      );
      todoList.push(todo);
    });

    return todoList;
  }
}

You shouldn't update the props value. instead, create a list in the local state itself. And use the local state value for render the template.

Also, You should access entered description value from the event object like below.

    handleEnterTodo(event) {
    this.setState({
      enterTodo: event.target.value
    });
  }

codesandbox- https://codesandbox.io/s/compassionate-ride-k5gdus?file=/src/App.js