I am loosing focus on input while typing in React Hook

Question

When I am typing on the input then the focus loses after writing a single letter. I tried to follow Input is loosing focus on hooks update but its still the same

Here is my code:

// Input.js

export const DesktopSearch = ({Filter, SetFilter }) =>{
    return (
        <form>
            <div className="search_area">                
                <input type="text" name="search" placeholder="Search Name" value={Filter.search} onChange={e => SetFilter({...Filter, [e.target.name]: e.target.value})}/>
            </div>
        </form>
    )
}

// App.js

export default function App() {

    const [Filter, SetFilter] = useState({search: ''})
    const Screens = () => {
    if(Screen === 1){
         return (<>
              <p>Screen 1</p>
              <DesktopSearch Filter={Filter} SetFilter={SetFilter}/>
         </>)
    }
    else(Screen === 2){
         return (<>
              <p>Screen 2</p>
              <DesktopSearch Filter={Filter} SetFilter={SetFilter}/>
         </>)
    }
    }
    return (
         <Screens/>
    )

}

Maybe just need an `e.preventDefault();` in your `onChange` handler (next to `SetFilter` call)? — Will, Feb 25 '20 at 16:48

score 0 · Answer 1 · answered Feb 25 '20 at 16:52

First of all, your "if ... else" is useless and should be reduced. Furthermore, you are rerendering your component onChange, you should apply the single responsibility principle and let your input manage its own state.

I would like to add that variable names should start with a lowercase character.

export default function App() {


    return (
         <>
              <p>Screen {Screen}</p>
              <DesktopSearch />
         </>
    );

}

Other file:

export const DesktopSearch = () =>{
    const [Filter, SetFilter] = useState({search: ''});

    return (
        <form>
            <div className="search_area">                
                <input type="text" name="search" placeholder="Search Name" value={Filter.search} onChange={e => SetFilter({...Filter, [e.target.name]: e.target.value})}/>
            </div>
        </form>
    )
}

I had to use if-else because I had to write more data representation which changes and the App.js has the main state because the whole axios function runs over there using useEffects. — xenon, Feb 25 '20 at 17:00

score 0 · Answer 2 · answered Feb 25 '20 at 17:30

You are using your Screens function like a component, but it is just a method in your function component. Try to invoke it instead of using like a component:

export default function App() {
  const [Filter, SetFilter] = useState({ search: "" });
  const Screens = () => {
    if (Screen === 1) {
      return (
        <>
          <p>Screen 1</p>
          <DesktopSearch Filter={Filter} SetFilter={SetFilter} />
        </>
      );
    } else if (Screen === 2) {
      return (
        <>
          <p>Screen 2</p>
          <DesktopSearch Filter={Filter} SetFilter={SetFilter} />
        </>
      );
    }
  };

  return Screens();
}

or you can drop it totally:

export default function App() {
  const [Filter, SetFilter] = useState({ search: "" });
    if (Screen === 1) {
      return (
        <>
          <p>Screen 1</p>
          <DesktopSearch Filter={Filter} SetFilter={SetFilter} />
        </>
      );
    } else if (Screen === 2) {
      return (
        <>
          <p>Screen 2</p>
          <DesktopSearch Filter={Filter} SetFilter={SetFilter} />
        </>
      );
    }
}

I am loosing focus on input while typing in React Hook

2 Answers2