There are a few ways to render something conditionally in React. You can either use the && operator or conditional rendering to show and hide data in the JSX.
If with Logical && Operator
You will see Apple written on your localhost. So how did it work?
First of all, we have created a boolean variable apple and assigned it a 'true' value. We can access this variable in our JSX and inside of our curly brackets, we can put our conditional logic.
<div>{apple && <h2>Apple</h2>}</div>
Here apple is the variable and our h2 tag will only work if apple is true, if apple is no longer true ( become false) h2 tag won't work because our condition gets reversed (false).
true && expression always evaluates to expression, and false && expression always evaluates to false.
Why don't you try and change the value of apple to false and see what happens?
If-Else with Conditional Operator
JavaScript conditional operator condition ? true : falseworks inside JSX as well.
<div>{apple ? "Apple" : "Banana"}</div>;
If apple is true, the output will be Apple, otherwise Banana.
Toggle button in React
In React, to manage the local state, we have to use the hooks inside of the functional component. You can't just simply update your state like this:
const handleChange=()=>{
return !changeText
}
You have to update the state via useState hook and import it at the top level.
let [changeText, setChangeText] = useState(true);
The text in the bracket and assigned to some value is called array destructing.
const foo = ['one', 'two', 'three'];
const [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"
You can add an onClick call back function on the button, so when you click on the button, it will call the handleChange function, which will change the boolean value of changeText from true to false.
That's about it, now you have a reusable toggle component to use in your app.
Follow my YouTube channel for more coding tutorials: https://www.youtube.com/channel/UCOHJCOprtOf4caI50lJlHSQ