CODEWITHSUNDEEP
reactjsnext.js
Ghost
Ghost

Reputation: 57

How can I render react Form conditionally with next js

I am new to web development and working on a small project with next js. I have a form of registration of restaurant which has many inputs that's why I want to split it into two pages. The first page contains the first half of the form and clicking on the button "next" takes the user to the rest of the form.

To do so I thought of displaying the first half of the form then after clicking on next I make this half disappear and display the second half. It is very simple, you will understand from my code:

 export default function RestaurantRegistration() {
 let turnPage = false 

  const turnToSecondPage = () => {
  turnPage = true 
      }
    return (


<React.Fragment turnPage={false} >
      
       //FIRST HALF FORM CODE
    <Button
        onClick={() => {turnToSecondPage()}}
       >
       Next
      </Button>
      </div>  
   </div>
</React.Fragment>
<React.Fragment turnPage={true} >
     
 //SECOND HALF OF FORM CODE 
</React.Fragment>

but I got the error

enter image description here

so what is the problem here? and is there a better way to do what I am wanting to do?

Upvotes: 0

Views: 247

Answers (1)

Neo
Neo

Reputation: 734

In this code you have 2 major mistake First you cant pass props to React.Fragment Second even if you can it still dont show your second page

you could use something like this.

export default function RestaurantRegistration() {
const [turnPage,setTurnPage]=useState(false);

  const turnToSecondPage = () => {
  setTurnPage(true)
      }
    return (


<React.Fragment>
      {!turnPage &&<div>
       //FIRST HALF FORM CODE
    <Button
        onClick={turnToSecondPage}
       >
       Next
      </Button>
</div>
}
{turnPage && <div> ...</div>}

</React.Fragment>

Upvotes: 1

Related Questions