Изменить состояние для события onClick в реакции другого компонента

Вы можете передать обратный вызов от компонента Header в качестве опоры в Sidebar, который, в свою очередь, передает этот обратный вызов в Navigation как опору.

В React обычно проводится различие между компонентами презентации и компонентами, содержащими логику (часто называемыми «компонентами контейнера»). Вы можете поместить туда все состояния и передать необходимые обратные вызовы в качестве свойств компонентам презентации.

В вашем конкретном случае это будет означать что-то вроде этого:

Header.js:

class Header extends Component {
  constructor(props) {
    super(props);

    this.state = {
      mobileOpen: false,
    };
  }

  // Create a callback to toggle the `mobileOpen` state
  onMenuItemClicked = () => {
    this.setState({mobileOpen: !this.state.mobileOpen});
  }

  render() {
    return (
      <Sidebar
        open = {this.state.mobileOpen}
        /* pass callback to Sidebar */
        onMenuItemClicked = {this.onMenuItemClicked}
      />
    );
  }
}

Sidebar.js:

function Sidebar({ open, onMenuItemClicked }) {
  return (
    <Navigation
      open = {open}
      /* pass callback from Header to Navigation */
      onMenuItemClicked = {onMenuItemClicked}
    />
  );
}

Navigation.js:

class Navigation extends Component {
  render() {
    // finally use the callback
    return (
       <MenuItem onClick = {() => this.props.onMenuItemClicked()}>text</MenuItem>
    );
  }
}