DEV Community

Ali Ibrahim
Ali Ibrahim

Posted on

create a reservasion section

#help #webdev #react

Hello everyone
im learning react right now i was building a section for a project which is reservation section but i get stuck and need some hint or guidance on how to organize the components and when i click and submit it should take me to another section This is how it should be

screen shot of the project
screen shot of the project

Image description

and there is several other pages as well
i couldnt find any tutorial or article regarding this

Top comments (2)

Collapse
 
tanmoysrt profile image
Tanmoy Sarkar •

You can manage it by useState easily.
I assume , you have section 1, section 2, section 3 .....
When someone submit section 1 going to section 2

In a useState you can store the state number and when someone submitting it can update its state , You can do it by simple if else.

const [currentSection, setCurrentSectionNo] = useState(1);

function submitProcess(){
     // do whatever your logic for submission or storing records
    // if that succed call
   setCurrentSectionNo(currentSection+1);
}

return (
<>
{  currentSection == 1 ? <Component_1 onClick={submitProcess} /> :
currentSection == 2 ? <Component_2 onClick={submitProcess} /> :
currentSection == 3 ? <Component_3 onClick={submitProcess} /> :
<div></div> }
</>
);
Enter fullscreen mode Exit fullscreen mode

It's most simple way to do it. You can do it also in better way, to make the code more clean.

Collapse
 
bluesky1992web profile image
Ali Ibrahim •

Thank you very much @tanmoysarkar it was really helpful

Read next

keploy profile image

Introduction: What Are Test Strategies?

keploy -

mayankchawdhari profile image

Funny-Captcha Web

Mayank Chawdhari -

mayankchawdhari profile image

CID-FUNNY-LOGIN

Mayank Chawdhari -

programmerraja profile image

Chatting with Mood: A Dynamic Theme Switcher Powered by DevCycle

Boopathi -