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

Question

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')
);

Answer 1

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