Re-render child when prop changes in App.js

I need the header of my page to change when a certain action occurs. For this I am making changes inside App.js.

function App() {

  const [list, setList] = useState([]);

  function addList(id) {
    var updated = list
    updated.push(id)
    setList(updated)
  }

  return (
    <Router>
      <div className="App">
        <Header list={list}></Header>
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

Header.js
const Header = ({list}) => {

    return (
        <div>
            <p>list</p>
        </div>
    );
}

I need Header to be re-rendered when setList happens. And I would assume that it would since list is being passed as a prop.

I have some other routes that run addList but the problem is that Header is not re-rendered. I'm sure there's a better way to go about this...

from Recent Questions - Stack Overflow https://ift.tt/3jmhfva
https://ift.tt/eA8V8J