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

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

Top comments (2)

Tanmoy Sarkar • Jan 4 '23

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> }
</>
);

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

Ali Ibrahim • Jan 9 '23

Thank you very much @tanmoysarkar it was really helpful

DEV Community

create a reservasion section

Top comments (2)

Read next

🚀 Higher Order Functions in JavaScript: Let's Dive In!

How to build online Video Editor with pure JavaScript - Video Effects

Deploying a (Static) Vite React App: A Complete Guide

New open-source multiplayer canvas game!