hide input field using hook in react

Neha Verma 0
Viewed 54

I have 4 input fields. username,password,email,mobile. if we type @ in username field, the email field should disappear and if we type any digit in username then mobile field should disappear. Help me with this. I have created very basic code but not sure how to achive this.


import { useState } from "react";

export default function App() {
  const [name, setname] = useState("");
  const [password, setPassword] = useState("");
  const [show, setShow] = useState();
  if (name.includes("@")) {
    setShow( )    //stuck here
  }

  return (
    <>
      <input
        type="text"
        placeholder="username"
        value={name}
        onChange={(e) => setname(e.target.value)}
      />
      <input
        type="password"
        placeholder="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <input type="email" placeholder="email" id="email" />
      <input type="number" placeholder="number"  />
      
    </>
  );
}
react-hooks functional-programming input reactjs javascript
4 Answers

Try below code

    import { useState } from "react";
    
    export default function App() {
      const [name, setname] = useState("");
      const [password, setPassword] = useState("");
//****************************************
      const [show, setShow] = useState(false);
//****************************************
      if (name.includes("@")) {
//****************************************
        setShow(true)    //stuck here
//****************************************
      }
    
      return (
        <>
          <input
            type="text"
            placeholder="username"
            value={name}
            onChange={(e) => setname(e.target.value)}
          />
          <input
            type="password"
            placeholder="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
//****************************************
         { show?
          <input type="email" placeholder="email" id="email" />:''}  
//****************************************    
          <input type="number" placeholder="number"  />
          
        </>
      );
    }
TopDev0

we can use with && operator if our show is false then it hide on screen

 import { useState } from "react";
    
export default function App() {
  const [name, setname] = useState("");
  const [password, setPassword] = useState("");
  const [show, setShow] = useState(true);
  if (name.includes("@")) {
    setShow(false)    //stuck here
  }

  return (
    <>
      <input
        type="text"
        placeholder="username"
        value={name}
        onChange={(e) => setname(e.target.value)}
      />
      <input
        type="password"
        placeholder="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
       {show && <input type="email" placeholder="email" id="email" />}
      
      <input type="number" placeholder="number"  />
      
    </>
  );
}
jsN00b0

I'll give example with the email - you can apply same approach for the phone.

Some notes: you do not need a separate state whether to show email filed, it is derived from the name state.

Advice: You should not change state during the function render. You can do that on a user interaction (onClick, onChange etc) or useEffect hook if data fetch or another side effect.

The solution is simple

import { useState } from "react";

export default function App() {
  const [name, setname] = useState("");
  const [password, setPassword] = useState("");
  const [show, setShow] = useState();
  
  const showEmailField = name.includes("@"); //derived computed value base on the name state

  return (
    <>
      <input
        type="text"
        placeholder="username"
        value={name}
        onChange={(e) => setname(e.target.value)}
      />
      <input
        type="password"
        placeholder="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      { showEmailField && <input type="email" placeholder="email" id="email" /> }
      <input type="number" placeholder="number"  />
      
    </>
  );
}
Svetoslav Petkov0

you can try using the useEffect hook. try something like this . in this way you can keep track of everytime name changes

useEffect(() => {
    if (name.includes("@")) {
      setShow();
    }
  }, [name]);

and then

show && (
  <input
    type="text"
    placeholder="username"
    value={name}
    onChange={(e) => setname(e.target.value)}
  />
)
duttasuraj0
Related