Giving Options to the User and then Displaying the chosen option - reactjs

Question

So, i have just started working on React and i have a doubt. So, i want to create two different forms and then allow user to fill one form by selecting that form. So, i have created both the forms now how do i create a page where i give options to the user to choose one and after the user chooses first option, then the first option form displays. How do i do that? I have created both the forms, now i just need help with how to link those two forms to the pages where i am giving option to the user.
So, do i need to create a third component like the other two containers. Those forms are basically are two different containers. So, how do i work on the third container?
Thanks

Answer 1

Firs you need two radio inputs that user will select them and a variable that will hold the selected value and will change on onChange:
const [selected, setSelected] = useState("first");
function onChange({ target }) {
setSelected(target.value);
}
return {
<label>
<input value="first" onChange={onChange} type="radio" name="forms" checked={selected === "first"} />
First Form
</label>
<label>
<input value="second" onChange={onChange} type="radio" name="forms" checked={selected === "second"} />
Second Form
</label>
}
Then you need to show forms based on what the selected value is:
{selected === "first" && <FirstForm />}
{selected === "second" && <SecondForm />}
So when selected is 'first' it will show FirstForm component otherwise when its 'second' it will show 'SecondForm'.
So the final MainComponent will be like this:
import React, { useState } from 'react';
import FirstForm from './first-form.js';
imprt SecondForm from './second-form.js';
function MainComponent() {
const [selected, setSelected] = useState("first");
function onChange({ target }) {
setSelected(target.value);
}
return (
<div className="App">
<h1>Select Form</h1>
<label>
<input value="first" onChange={onChange} type="radio" name="forms" checked={selected === "first"} />
First Form
</label>
<label>
<input value="second" onChange={onChange} type="radio" name="forms" checked={selected === "second"} />
Second Form
</label>
{selected === "first" && <FirstForm />}
{selected === "second" && <SecondForm />}
</div>
);
}