Component with input bar getting value copied from another component

I have an App component which holds two other components (A and B), which are supposed to be search bars with <input type = "text"> tags. The App component has two functions, fetchA() and fetchB(), that are passed as props to A and B and are attached to the onChange event handlers in their respective <input> tags. So whenever text input in the search bars changes, their respective functions in the App component are invoked.

const App = ()=>{   //...some code     functionA() {     //...some code   }     functionB() {     //...some code   }     return(    <div>     <A runWhenChanged = {functionA} />     <B runWhenChanged = {functionB} />    </div>   )  }   //... some code  

A.js

const A = ({runWhenChanged})=>{   const [term,setTerm] = useState('');     const runOnChange = (event)=>{    setTerm(event.target.value);    runWhenChanged(term);   }    return(<div>  <input type = "text" onChange = {runOnChange} value = {term}/>  </div>  );  }    //...  

B.js (pretty much the same as A.js)

const B = ({ runWhenChanged }) => {      const [term, setTerm] = useState('');        const runOnChange = (event) => {          setTerm(event.target.value);          runWhenChanged(term);      }        return (          <div>              <input type="text" onChange={runOnChange} value={term}></input>          </div>      )  }    //...  

The issue here is, upon first rendering, when one types something in the first search bar (the one rendered by A.js) and then clicks anywhere on the page, the typed text is automatically copied into the second search bar (the one rendered by B.js). I don't understand how this could possibly happen.

https://stackoverflow.com/questions/66053036/component-with-input-bar-getting-value-copied-from-another-component February 05, 2021 at 04:02AM