How to correctly pass a callback and a state to the Layout element in React Router Dom?-CodePudding

How to correctly pass callbacks and states to the Layout so that they can be used elsewhere? When I share this as below, I have errors and a white screen:

class Menu extends Component {
  constructor(props) {
    super(props);
    this.onSearchF = this.onSearchF.bind(this)
  } 
  state = {
    searchBlock: false,
  };

  onSearchF = (keyword) => {
    const filtered = this.state.data.filter((entry) =>
      Object.values(entry).some(
        (val) => typeof val === "string" && val.toLowerCase().includes(keyword.toLowerCase())
      )
    );
  };
  render() {
    return (
      <div className="content">
        <Routes>
          <Route path="/" element={<Layout searchBlock={this.state.searchBlock} onSearch={()=>this.onSearchF()}/>}>
            <Route
              index
              element={
                <Home data={this.state.data} num={this.state.data.length} />
              }
            />
          </Route>
        </Routes>
      </div>
    );
  }
}
export default Menu;

Here I pass the callback to the Header that I previously passed to the Layout:

const Layout = () => {
  return (
    <>
      <Header sblock={this.props.searchBlock} onS = {this.props.onSearch}/>  
    </>
  );
};
export default Layout;

I want to use the callback here:

function Header() {
  return (
    <header className="header">
        <button onClick={()=>console.log(this.props.sblock)}>button</button>
    </header>
  );
}

export default Header;

CodePudding user response：

Your Layout is a functional component, and you are trying to use this.props in it; this is incorrect. Get the props as part of arguments instead, like so:

import { Outlet } from "react-router-dom";
const Layout = ({searchBlock,onSearch}) => {
  return (
    <>
      <Header sblock={searchBlock} onS={onSearch}/>  
      <Outlet/>
    </>
  );
};
export default Layout;