how to hide and show input conditionally in React Js

user_16454571 0
Viewed 66

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;
react-hooks reactjs conditional-statements
4 Answers

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

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

user_113992210

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

user_130170190

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;
user_164545710
Related