I was wondering why the child component with the changed value is not getting rendered here.
Isn’t it a good idea to have a child handle its own changes or better to have the controller in the parent?
JavaScript
x
15
15
1
class App extends React.Component {
2
constructor() {
3
super();
4
this.state = {
5
todos: todosData
6
};
7
}
8
render() {
9
const todoItems = this.state.todos.map(item => (
10
<TodoItem key={item.id} item={item} />
11
));
12
return <div className="todo-list">{todoItems}</div>;
13
}
14
}
15
This is the Child TodoItem
JavaScript
1
26
26
1
class TodoItem extends React.Component {
2
constructor(props) {
3
super(props);
4
this.state = {
5
isComp: {}
6
};
7
this.handleChange = this.handleChange.bind(this);
8
}
9
handleChange() {
10
let tempObj = this.state.isComp;
11
tempObj.completed = !this.state.isComp.completed;
12
this.setState = { isComp: tempObj };
13
console.log(this.state.isComp);
14
}
15
render() {
16
this.state.isComp = this.props.item;
17
console.log(this.state.isComp);
18
return (
19
<div className="todo-item">
20
<input type="checkbox" checked={this.state.isComp.completed} />
21
<p>{this.props.item.text}</p>
22
</div>
23
);
24
}
25
}
26
As you can see the state is changed with handleChange()
but this does not fire the render. I am also not too sure if another object can be assigned to an object of the state (let tempObj = thi.state.isComp
).
The functionality I am trying to achieve is check and uncheck a box and render accordingly.
Advertisement
Answer
What is this?
JavaScript
1
2
1
this.setState = { isComp: tempObj };
2
I think it should be
JavaScript
1
2
1
this.setState({ isComp: tempObj });
2