how to hide and show input conditionally in React Js - reactjs

Question

I Know this approach is not good in react js. but i don't know how to achieve same with react js. not getting the right way of doing this.
I have multiple input which I have to hide and show based on value selected from dropdown.
I am making this demo code for anyone who want to check.
https://codesandbox.io/s/gracious-hertz-k2ttl8?file=/src/App.js:0-1084
App.js
const App = () => {
const getInput = (e) => {
let input = e.target.value;
let data = document.getElementsByClassName(input);
data.array.forEach((ele) => {
if (ele.style.display === "none") {
ele.style.display = "block";
}
});
};
return (
<>
<select onChange={getInput}>
<option value="Address">Address</option>
<option value="Name">Name</option>
<option value="Both">Name && Address</option>
</select>
<br />
<br />
<input
className="Address Both"
type="text"
name="city"
placeholder="City"
/>
<input
className="Address Both"
type="text"
name="pincode"
placeholder="pincode"
/>
<br />
<br />
<input
className="Name Both"
type="text"
name="firstName"
placeholder="First Name"
/>
<input
className="Name Both"
type="text"
name="firstName"
placeholder="Last Name"
/>
</>
);
};
export default App;

Answer 1

You can use a state to store the selected value and then render the input based on that state:
const App = () => {
const [selected, setSelected] = useState("");
const getInput = (e) => {
setSelected(e.target.value);
};
return (
<>
<select onChange={getInput}>
<option value="Address">Address</option>
<option value="Name">Name</option>
<option value="Both">Name && Address</option>
</select>
<br />
<br />
{selected === 'Address'&&<input
className="Address Both"
type="text"
name="city"
placeholder="City"
/>}
// Similarly for the other inputs
</>
);
};

Answer 2

You can take a state that keeps track of the selected dropDown items.
const [selectedItem, setSelectedItem] = useState({
city: false,
pincode: false,
...
})
Then based on the state show the input put conditionally in the JSX something like the following codes:
{
selectedItem.city &&
<input
className="Address Both"
type="text"
name="city"
placeholder="City"
/>
}
You can follow the same thing for other input values also.
and don't forget to update selectedItem state on dropDown onChange function

Answer 3

i have made changes in your codesandbox , you need to use conditional rendering to show or hide component.

Answer 4

thank everyone who did answer to help me out
finally it working just as I want and I figure it out it was extra "br/" tag" which was the problem in the code
final code :
App.js
import { useState } from "react";
const App = () => {
const [display, setdisplay] = useState({
city: true,
pincode: true,
firstName: true,
lastName: true
});
const getInput = (e) => {
let input = e.target.value;
switch (input) {
case "Address": setdisplay({city: false, pincode: false, firstName: true, lastName: true }); break;
case "Name": setdisplay({ city: true, pincode: true, firstName: false, lastName: false }); break;
case "Both": setdisplay({city: false, pincode: false, firstName: false, lastName: false }); break;
default: setdisplay({});
}
};
return (
<>
<select onChange={getInput}>
<option value="Address">Address</option>
<option value="Name">Name</option>
<option value="Both">Both</option>
</select>
<br />
<input
style={{ display: display.city ? "none" : "inline-block" }}
className="Address Both"
type="text"
name="city"
placeholder="City"
/>
<input
style={{ display: display.pincode ? "none" : "inline-block" }}
className="Address Both"
type="text"
name="pincode"
placeholder="pincode"
/>
<input
style={{ display: display.firstName ? "none" : "inline-block" }}
className="Name Both"
type="text"
name="firstName"
placeholder="First Name"
/>
<input
style={{ display: display.lastName ? "none" : "inline-block" }}
className="Name Both"
type="text"
name="firstName"
placeholder="Last Name"
/>
</>
);
};
export default App;