Question 72786 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Render conditional not working – Next.js 13 – Dynamic Routing – Reactjs

This page is generated by getStaticPaths and getStaticProps to have [projectSlug].tsx,

The problem is that the <h1>{counter}</h1> is modified when the state changes but the condition is not affected by the change.

const [counter, setCounter] = useState(0); 
<>
    <h1>{counter}</h1>

    {counter % 2 === 0 ? (
        <div> Hola 1 </div>
      ) : (
        <div> Hola 2 </div>
      )
    }
</>

I have not been able to find any kind of solution.

Tags:

2

Answers


  1. 0

    There is no need for round braces around conditionally rendered div elements. Remove them and see if it sovles the issue.

    Login or Signup to reply.
  2. 0

    I test that code.
    It run. restart your computer and retest it.

    You may use getStaticProps for default value of useState on builds?

    If you use getStaticProps that page code only one use when compiler build it.

    so if getStaticProps’s parameter is changed, page isn’t changed.

    if that reason, you need to change getStaticProps to getServerSideProps or get parameter slug or SWR so on.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search