Switching Between Different Button Modes In React Js

To develop this visibility toggle all we need is just a single button which would toggle two different texts based on the function of the button, now it would appear in the UI that there are two different buttons, but there is just a single button which would have a boolean that states or print on the screen if the following statement is true or false, so we code it like this :

Note that we should have already created a root id in the HTML to link it up with the react app

Const exampleTemplate = (
<div>
<h1> Example Header</h1>

Above we have the header, & below we have the single button needed, we create an onClick function:

<button onClick={exampleClickFunction}>
     {exampleClickVisible ? ‘example hide text’ : ‘example view text’}
</button>

Now in the above button the expression used is a spread operator

</div>
{exampleVisible && (
<div>
<p>here is the text</p>
</div>)}
);

//so we create a variable containing the boolean and an on click function that triggers the button //change in accordance to the boolean and the visibility toggle.

const exampleVisible = false;
const exampleClickFunction = () => {
exampleVisible= !exampleVisible
}

This function simply changes the value of the variable to not.
Now, all we need to do for this to function is to rerender the code into a function.

const exampleRender = () => {
const exampleTemplate = (
<div>
<h1> Example Header</h1>

Above we have the header, & below we have the single button needed, we create an onClick fn.

<button onClick={exampleClickFunction}>
   {exampleClickVisible ? ‘example hide text’ : ‘example view text’}
</button>
</div>

Now in the above button, the expression used is a spread operator.

{
  exampleVisible && (
   <div>
    <p>here is the text</p>
  </div>
 )}
);

We create a variable containing the boolean and an on click function that triggers the button, change in accordance to the boolean and the visibility toggle.

let exampleVisible = false;
const exampleClickFunction = () => {
    exampleVisible= !exampleVisible
}

This function changes the value of the variable to the opposite boolean.

ReactDOM.render(exampleTemplate, document.getElementById(appRoot))
};