javascript - Component with input bar getting value copied from another component

Question

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(term) {
   //...some code
 }

 functionB(term) {
   //...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.

EDIT:

I understand the code I defined works fine by itself. So, I'm going to add some more details about what I'm doing inside the callback functions.

const App = ()=>{
 //...some code
 const [termA,setTermA] = useState('');
 const [termB,setTermB] = useState('');

 useEffect(()=>{
  //Returns an array using JavaScript's filter() function on an array of objects by 
  //checking if both the terms match the values of two particular keys in every 
  //object of the array 
 },[termA,termB]);

 functionA(term) {
   setTermA(term);
 }

 functionB(term) {
   setTermB(term);
 }

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

question from:https://stackoverflow.com/questions/66053036/component-with-input-bar-getting-value-copied-from-another-component

Answer 1

I reviewed the code that you pasted here and I found the following:

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

Here, I don't know if it was a mistake when you where editing the post or it's the literal copy of your code. But on the functions declarations, you have two functions called functionA. There is no functionB that is being passed to the B component, so you are passing an undeclared function. I would recommend checking that and turning those functions into arrow functions.

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

For this next piece of code I see that you declared your component with constant and also runOnChange; you should switch it to const. At the return, the div doesn't have a properly closed tag.

Aside that, I think the problem is with the function declarations, what is being called inside them or how they are being passed to the components. I duplicated your code applying the observations I just wrote and everything is working fine. Here is my code:

App component:

import React from "react";

import A from "./A";
import B from "./B";

function App() {

  const functionA = () => {
    console.log("Changed value in A");
  }
 
  const functionB = () => {
    console.log("Changed value in B");
  }


  return (
    <div>
      <A runWhenChanged = {functionA} />
      <B runWhenChanged = {functionB} />
    </div>
  );
}

export default App;

A component:

import React, { useState } from "react";

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

 export default A;

B component:

import React, { useState } from "react";

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}/>
    </div>
  );
 }
 
 export default B;