score:2

Accepted answer

Working app https://codesandbox.io/s/jovial-pascal-kww85?file=/src/App.js

Note:

  1. Prop name cannot be key as this name is reserved to uniquely identify component.(I have used apikey as name) 
    <Display  apikey={key} placeName={placeName} />
  2. In Navbar you have to use another state to track of input in textbox. 
    const  [input, setInput] =  useState("");
  3. In Navbar it should be onClick={() => props.setPlaceName(input)} 
    value={input}
onChange={(e) =>  setInput(e.target.value)}
  4. Form element on Submit prevent Default to not refresh page. 
    <form  className="d-flex"  onSubmit={(e) =>  e.preventDefault()}>
  5. In Display call useEffect when props.placename changes. 
    useEffect(async  ()  =>  {

getWeatherInfo();

},  [props.placeName]);

score:0

When a user clicks on the button you are not actually updating the state.

button onClick={props.setPlaceName}

should be something like

button onClick={() => props.setPlaceName("Hello world")}

score:0

The relevant part of your code is in the Navbar component: you don't provide the new placeName to the setter function.

So, for example, your Navbar component should look somewhat like this:

function Navbar(props) {
  // This state stores the updated input value
  const [inputPlaceName, setInputPlaceName] = useState('');

  // This function provides `setPlaceName` with the input value
  function setGlobalPlaceName() {
    props.setPlaceName(inputPlaceName);
  }

  return (
    <form>
      <input type="search" onChange={setInputPlaceName} />
      <button onClick={setGlobalPlaceName} type="submit">
        Search
      </button>
    </form>
  );
}

Then, try to subscribe Display component to updates of props.placeName. This is done by adding it to the dependencies array of its useEffect:

useEffect(getWeatherInfo, [props.placeName])

Related Query

More Query from same tag