How do I update a variable in a child component in react?

Question

I have 3 components, the parent being App, and the children being SearchFlight and FoundFlight.

I am trying to pass a string value that App receives from SearchFlights (via its flightInput prop), to FoundFlight.

I would then like FoundFlight to assign this value to a local variable every time the value is changed.

Below is my code in App.js:

import { useState } from 'react';
import FoundFlight from './Components/FoundFlight';
import SearchFlights from './Components/SearchFlights';

function App() {
  const [searchedFlight, setSearchedFlight] = useState('');

  const searchedFlightHandler = (searchedFlightNum) => {
    setSearchedFlight(searchedFlightNum);
  };

  return (
    <div>
      <SearchFlights flightInput={searchedFlightHandler} />
      <FoundFlight userInput={searchedFlight} />
      <FlightList />
    </div>
  );
}

export default App;

Below is my code in SearchFlights.js:

import { useState } from 'react';

const SearchFlights = (props) => {
  const [enteredFlight, setEnteredFlight] = useState('');

  const flightInputHandler = (event) => {
    setEnteredFlight(event.target.value);
    props.flightInput(enteredFlight);
  };

  return (
    <>
      <div className="container">
        <h1>Search Flights</h1>
        <form>
          <label>Enter a flight number</label>
          <input type="text" onChange={flightInputHandler} />
        </form>
      </div>
    </>
  );
};
export default SearchFlights;

Below is my code in FoundFlight.js:

import Card from '../UI/Card';
import { useState } from 'react';
import './FoundFlight.css';

const FoundFlight = (props) => {
  const [filteredFlight, setFilteredFlight] = useState('');
  setFilteredFlight(props.userInput);

  let foundFlightOutput = (
    <Card>
      <p>No flight found yet</p>
    </Card>
  );

  return foundFlightOutput;
};

export default FoundFlight;

In FoundFlight.js, I am using setFilteredFlight(props.userInput) to try and update the value it receives from App.js, but when doing this, I am getting the following error:

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop

So my question is, how can I assign the string value received from App.js in FoundFlight.js to a local variable every time the string is updated?

Answer 1

You're not allowed to call setState in the body of a component:

const FoundFlight = (props) => {
  const [filteredFlight, setFilteredFlight] = useState('');
  setFilteredFlight(props.userInput);  // <-- no! bad!
  // ...

Instead, to have filteredFlight track userInput if it changes, use an useEffect hook:

const FoundFlight = (props) => {
  const [filteredFlight, setFilteredFlight] = useState(props.userInput);
  useEffect(() => {
    setFilteredFlight(props.userInput);
  }, [props.userInput]);
  // ...

On the other hand, if you're not planning on allowing the user to change filteredFlight within that component, then just always read it from the prop and you're done – no faffing around with extra state that you need to track:

const FoundFlight = (props) => {
  const filteredFlight = props.userInput;
  // ...