React: passing props through a layout component

Question

new to React here, I want to have a filter (in Nav.js) that filters content on App.js, but is nested in a Layout component. What's the best way to pass around props here? Can I keep everything as a functional component?

files here: https://codesandbox.io/s/filter-menu-react-layout-uvppj?file=/src/Layout.js

Answer 1

Just pass the setFilter as props and you should be good to go.

const Layout = props => {
  const { setFilter, children } = props;
  return (
    <div>
      <Nav setFilter={setFilter} />
      {children}
    </div>
  );
};