React: Passing a function received as props to another function

Question

The function signOut is defined and passed to the stateless Header component by its parent App like this;

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.signOut = this.signOut.bind(this);
  }

  signOut() {
    this.setState({
      auth: null,
    });
  }

  render() {
    return (
      <div>
        <Header signOut={this.signOut} />
      </div>
    );
  }
}

Header Has several functions defined outside of it, and I would like to further pass signOut to those functions, ideally like I've demonstrated below, but right now, its wrong.

//one of several functions defined to be used inside header
function nav() {
  return localStorage.getItem("token") ? (
    <p>hii</p>
  ) : (
    <div className="linkWrapper">
      <Link className="link" to="/login">
        Login
      </Link>
      <Link className="link" to="/admin">
        Admin
      </Link>
      //signOut used here. 
      <div className="link" onClick={this.props.signOut}>
        Logout
      </div>
    </div>
  );
}

const Header = (props) => (
  <div className="headerWrapper">
    {nav()}
  </div>
);

export default Header;

How do I properly pass sighOut to these functions from Header ? Is this even a thing? Thanks!

Answer 1

You don't want to call a function you want to render a functional component and pass properties to it:

function Nav(props) {
  // use props.signOut
  return ...
}

const Header = (props) => (
  <div className="headerWrapper">
    <Nav signOut={props.signOut}/>
  </div>
);

Answer 2

Because you haven't declared Header as class, props aren't suppose to be called with keyword { this }. also, pass props from { Header } to { nav } (if it outside Header...)

---

const Header = (props) => (
    <div className="headerWrapper">
      {nav(props)}
    </div>
    );
export default Header;


function nav(props) {
 return localStorage.getItem("token") ? (
  <p>hii</p>
   ) : (
  <div className="linkWrapper">
    <Link className="link" to="/login">
      Login
    </Link>
    <Link className="link" to="/admin">
      Admin
    </Link>
    //signOut used here. 
    <div className="link" onClick={props.signOut}>
      Logout
    </div>
  </div>
);

}

Answer 3

If you want to pass a variable (which might be a function), you need to pass it as a prop to a child component.

Note that the name is determined upon the parent component's passing name:

function Nav(props) {
  return (
    <div className="link" onClick={props.signOut}>
      Logout
    </div>
  );
}


function Header(props) {
 return (
   <Nav
     signOut={props.headerSignOut}
   />
 );
}


function App() {
  function originalSignOutFunction() {
    console.log('Signed out');
  }

  return (
    <Header
      headerSignOut={originalSignOutFunction}
    />
  );
}

Answer 4

Give the nav() a sign out argument:

function link({to, signOut, text}) {
  <Link className="link" to={{
    pathname: to,
    state: {
      signOut
    }
  }}>
  </Link
}
function nav({ signOut }) {
  return localStorage.getItem("token") ? (
    <p>hii</p>
  ) : (
    <div className="linkWrapper">
      <link to="/admin" signOut={signOut} text={"Admin"} />
      <link to="/login" signOut={signOut} text={"Login"} />
      <div className="link" onClick={signOut}>
        Logout
      </div>
    </div>
  );
}
const Header = (props) => (
  <div className="headerWrapper">
    <nav signOut={props.signOut} />
  </div>
);