Accepted answer

Working app


  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)}
    onChange={(e) =>  setInput(}
  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  ()  =>  {
    },  [props.placeName]);


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


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() {

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

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