nextjs conditional jsx not re-rendering

Question

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.

Tushar Shahi · Accepted Answer · 2022-06-14 16:24:22Z

1

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

answered Jun 14, 2022 at 16:24

Tushar Shahi

21.6k2 gold badges25 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Barty Over a year ago

Can you explain how the setIsClicked works? Thank you. Also why must the onclick function be inside where the render function is, why can't it be outside that block?

Collectives™ on Stack Overflow

nextjs conditional jsx not re-rendering

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related