I'm using conditional rendering to decide if an element is visible or not (hello in this case). However, I found that the condition (added) is true when is printed in the console, but hello doesn't show up.
Here is my code in the render() of the component.
render() {
let {added}=this.state;
console.log(added);
return <div style={{ margin: "5px" }}>
{added==true && <h1>hello</h1>}
</div>;
}
Thank you so much
A little bit of background: added is updated by the component's child. I think it's updated successfully since console prints the expected value.
change logic like this, use of && will make sure its true and then go for other <h1> tag to render, else if false then not render it
render() {
let {added}=this.state;
console.log(added);
return <div style={{ margin: "5px" }}>
{added && <h1>hello</h1>}
</div>;
}
if you want to use ternary conditions operator ? :, do like this syntax,
{added == true ? <h1>hello</h1> : null}