nextjs conditional jsx not re-rendering-CodePudding

Up in my component I have:

 let isClicked = false;

Down where things are rendered I have:

<div className="relative">
   {!isClicked ? (
    <div className="relative">
       1
    </div>
    ) : (
    <div className="relative">
       2
    </div>
    )
   }
</div>

The issue is nothing changes when the variable changes. I can ensure the variable changes on the command line. And the logic works if I change it and manually reload the page.

The issue is it won't re-render when the variables changes during the run time.

CodePudding user response：

There are special variables in react that cause rerender on their change. These are state variables. Imagine the problem you will face if every variable change causes a rerender.

If this is a functional component you can make use of useState:

const [isClicked,setIsClicked] = useState(false);
.
.
//some method triggered by button click etc.
const onclick =() => {
setIsClicked(true);
}
.
.

Read : Link and Link