Нажмите, чтобы открыть всех братьев и сестер - React

У каждого родителя должно быть свое состояние.

const padreState = {};
// crear estado para cada padre
Object.keys(PadreMap).forEach(item => {
  padreState['padre-' + PadreMap[item].Id] = false;
});

this.setState({
  menuSubmenu: Object.keys(PadreMap).map(padre => ({
    menu: padre,
    submenu: PadreMap[padre].Hijo,
    id: PadreMap[padre].Id, // cambiaron desde PadreMap.Id
    descripcion: PadreMap[padre].Description,
    url: PadreMap[padre].URL
  })),
  padreState: padreState
});

подменю по клику

toggle = padreState => {
  Object.keys(padreState).forEach(item => {
    padreState[item] = false;
  });
};

submenuClick(padre) {

  const { padreState } = this.state;
  const corriente = { ...padreState };

  const toggle = !corriente[padre];

  this.toggle(corriente); // toggle menu items
  corriente[padre] = toggle;

  this.setState({
    padreState: corriente
  });
  //alert('Click!')
}

вызовите функцию, например, в вашем <Menu .../>

submenuClick = {() => this.submenuClick('padre-' + datos.id)}
abrirSubmenu = {this.state.padreState['padre-' + datos.id]}

полный код

class Nav extends Component {
  constructor(props) {
    super(props);
    this.state = {
      menuSubmenu: [],
      abrirSubmenu: false,
      padreState: {}
    };
    this.submenuClick = this.submenuClick.bind(this);
  }

  toggle = padreState => {
    Object.keys(padreState).forEach(item => {
      padreState[item] = false;
    });
  };

  submenuClick(padre) {

    const { padreState } = this.state;
    const corriente = { ...padreState };

    const toggle = !corriente[padre];

    this.toggle(corriente);
    corriente[padre] = toggle;

    this.setState({
      padreState: corriente
    });
    //alert('Click!')
  }

  componentWillMount() {
    fetch('fake.php')
      .then(response => response.json())
      .then(menuSubmenu => {
        const PadreMap = menuSubmenu.reduce((acc, obj) => {
          if (!acc[obj.Padre]) {
            acc[obj.Padre] = {
              ...obj,
              Hijo: [obj.Hijo],
              Description: [obj.Description]
            };
          } else {
            !acc[obj.Padre].Hijo.includes(obj.Hijo) &&
              acc[obj.Padre].Hijo.push(obj.Hijo);
            //!acc[obj.Padre].Hijo.includes(obj.Hijo) && acc[obj.Padre].Hijo.push(obj.Description)
          }
          return acc;
        }, {});

        const padreState = {};
        // crear estado para cada padre
        Object.keys(PadreMap).forEach(item => {
          padreState['padre-' + PadreMap[item].Id] = false;
        });

        this.setState({
          menuSubmenu: Object.keys(PadreMap).map(padre => ({
            menu: padre,
            submenu: PadreMap[padre].Hijo,
            id: PadreMap[padre].Id, // cambiaron desde PadreMap.Id
            descripcion: PadreMap[padre].Description,
            url: PadreMap[padre].URL
          })),
          padreState: padreState
        });
        console.info(PadreMap);
      });
  }

  render() {
    if (this.state.menuSubmenu.length > 0) {
      return (
        <nav className = "nav">
          <div className = "menu">
            <ul className = "list">
              {this.state.menuSubmenu.map(datos => (
                <Menu
                  key = {datos.id}
                  menu = {datos.menu}
                  submenu = {datos.submenu}
                  descripcion = {datos.descripcion}
                  submenuClick = {() => this.submenuClick('padre-' + datos.id)}
                  abrirSubmenu = {this.state.padreState['padre-' + datos.id]}
                />
              ))}
            </ul>
            <div className = "content-bnt">
              <button id = "desplegar" className = "btn btn--rounded">
                <Icon icon = "flecha" className = "ico-flecha" />
              </button>
            </div>
          </div>
        </nav>
      );
    }
    return <p>Cargando usuarios...</p>;
  }
}

class Menu extends Component {
  render() {
    return (
      <li key = {this.props.id} className = "list__item">
        <button
          title = {this.props.menu}
          id = {'mn-' + this.props.menu}
          className = "desplegable"
          onClick = {this.props.submenuClick}
        >
          <Icon icon = "auriculares" className = "ico-auriculares" />
          {this.props.menu}
        </button>
        {this.props.abrirSubmenu ? (
          <div id = "sb-crm" className = "submenu">
            {this.props.submenu.map(hijo => (
              <h3 className = "nav--title">
                <Icon icon = "descargar" className = "ico-descargar" />
                {hijo}
              </h3>
            ))}
            <ul className = "list">
              <li className = "list__item">
                {this.props.descripcion.map(tercerNivel => (
                  <a href = {this.props.url} title = {this.props.descripcion}>
                    {tercerNivel}
                  </a>
                ))}
              </li>
            </ul>
          </div>
        ) : null}
      </li>
    );
  }
}

export default Nav;