React controlled input gets unfocussed on every character,-CodePudding

I am working on implementing a search bar for a notes app I have been working on, I put an input inside a SideBar component, which is nested inside the main App component. The issue is that whenever I input a character, the input unfocuses.

My code:

function App() {
  const [searchTerm, setSearchTerm] = useState("");

  function SideBarNotes() {
    return (
          <section className='search'>
            <input type="text" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} placeholder='Search...'/>
          </section>
    )
  }
  
  return (
    <div className="App">
      <SideBarNotes />
    </div>
  )
}

I would expect that the input would function as a regular controlled input, but instead, it reloads. I need the input to be "global", as I want to use it inside the App component as well.

I have also tried the use-between hook which result was the same.

CodePudding user response：

To your other answer.

Yes, it sounds like you are using TypeScript in your project, and the error you're seeing is because TypeScript does not know about the searchTerm prop that you are passing to the SideBarNotes component.

To fix this error, you can provide TypeScript with the type of the searchTerm prop by using the React.Props type and the React.ComponentClass type. Here's how you could modify your code to do this:

import * as React from 'react';

interface SideBarNotesProps {
  searchTerm: string;
  setSearchTerm: (searchTerm: string) => void;
}

class SideBarNotes extends React.Component<SideBarNotesProps> {
  render() {
    return (
          <section className='search'>
            <input type="text" value={this.props.searchTerm} onChange={(e) => this.props.setSearchTerm(e.target.value)} placeholder='Search...'/>
          </section>
    )
  }
}

function App() {
  const [searchTerm, setSearchTerm] = useState("");

  return (
    <div className="App">
      <SideBarNotes searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
    </div>
  )
}

In this code, the SideBarNotesProps interface defines the types of the searchTerm and setSearchTerm props that the SideBarNotes component expects to receive. The SideBarNotes component is then defined using the React.Component class and the SideBarNotesProps interface, which tells TypeScript that the SideBarNotes component has a searchTerm prop of type string and a setSearchTerm prop of type (searchTerm: string) => void.

This should fix the TypeScript error you're seeing, and you should now be able to use the searchTerm prop in the SideBarNotes component without any issues. Let me know if you have any other questions.

CodePudding user response：

It sounds like the issue you're experiencing is that the input is losing focus every time you type in it. This is happening because you're using a functional component for the SideBarNotes component, and every time the searchTerm state updates, the entire SideBarNotes component is re-rendered, which causes the input to lose focus.

To fix this issue, you can try using a class-based component for SideBarNotes instead. This will allow the input to retain its focus even when the searchTerm state updates, because the input will not be re-rendered every time the state changes.

Here's how you could modify your code to use a class-based component for SideBarNotes:

class SideBarNotes extends React.Component {
  render() {
    return (
          <section className='search'>
            <input type="text" value={this.props.searchTerm} onChange={(e) => this.props.setSearchTerm(e.target.value)} placeholder='Search...'/>
          </section>
    )
  }
}

function App() {
  const [searchTerm, setSearchTerm] = useState("");

  return (
    <div className="App">
      <SideBarNotes searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
    </div>
  )
}

This should fix the issue you're experiencing, and the input in the SideBarNotes component should retain its focus even when the searchTerm state updates. I hope this helps! Let me know if you have any other questions.