I am rendering a new form when the button is clicked. So basically I change a state within the component from:
false to true or null to true
However, it is strange that component does not re-render after the state change
export default class BoardManager extends React.Component{
constructor(){
super();
this.state = {
newForm : null
};
setTimeout(() => {
this.state = {
newForm : true
};
console.log(this.state.newForm);
},1000);
}
render(){
return(
<div>
Some thing here
{this.state.newForm ? <NewBoardForm />: null}
</div>
)
}
}
Help much appreciated!!!
Edit!!! Solution
export default class BoardManager extends React.Component{
constructor(){
super();
this.state = {
newForm : null
};
}
render(){
return(
<div>
<BoardsTable boards={BoardData.boards}/>
<button onClick={() => {
this.setState({
newForm : true
});
console.log(this.state.newForm);
}}>Add New</button>
<button onClick={() => {
this.setState({
newForm : null
});
console.log(this.state.newForm);
}}>Delete</button>
{this.state.newForm ? <NewBoardForm />: null}
</div>
)
}
}
Move the setTimeout call to inside a componentDidMount
and use this.setState
in there
You have to use this.setState({newForm: true})
instead of this.state = {newForm : true}
And put setState
in other lifecycle stages.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With