In order to get to know React better, I have been working on a todo app for some time. The work is stacking up as I try to implement the handleStatus function and the change of the status immutable.
The array TodoList contains two further arrays: openTodo and doneTodo. In the Todo component, todos are stored either in one or the other array according to their status.
Currently, the status is changed, but this is not done immutably. Thanks for the help
export class TodoTable extends React.Component {
constructor(props) {
super(props);
this.state = {
enterTodo: "",
todos: this.props.todos,
status: 'open'
};
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) {
let status;
if(event.status == 'done'){
event.status = 'open';
}
else{
event.status = 'done';
}
let todo = {
id: event.id,
describtion: event.describtion,
status: status
};
this.setState({
});
}
export class Todo extends React.Component {
render() {
const openTodo = [];
const doneTodo = [];
const lineBreak = <hr></hr>
const todoList =
[
openTodo,
lineBreak,
doneTodo
];
this.props.todos.forEach((element, index) => {
if(this.props.todos[index].status == 'open'){
let todoOpen = (
<div>
{this.props.todos[index].describtion}
{this.props.todos[index].status}
<button
type= 'button'
onClick = {() => this.props.handleStatus(this.props.todos[index])}
></button>
{this.props.todos[index].id}
</div>
);
todoList[0].push(todoOpen);
}
else{
let todoDone = (
<div>
{this.props.todos[index].describtion}
{this.props.todos[index].status}
<button
type= 'button'
onClick = {() => this.props.handleStatus(this.props.todos[index])}
></button>
{this.props.todos[index].id}
</div>
);
todoList[2].push(todoDone);
}
});
return todoList;
}
}
