show/hide in map() react

Question

I'm doing a collapse on the map (), when I click to open a card it opens normal but when I click to open another card it first closes the card that I had opened for the second click to open the card. I would like to open a card and when opening another card, keep the previous card open.

constructor(props) {
    super(props);

    this.state = {
      gateways: this.props.gateways,
      com_inds: this.props.com_inds,
      sensor_chiefs: this.props.sensor_chiefs,
      sensores: this.props.sensores,
      gateway_id_aberta: null,
      display: false,
      loading: false,
      showMe: false,
      chiefs_gateway: []
    };
  };

  collapse_sensoreschief(gateway){

    this.setState({chiefs_gateway: gateway.id})

    this.setState({showMe:!this.state.showMe})


  }

up to my button:

render() {

    return Object.values(this.state.gateways).map(gateway =>{
      const com_inds_deste_gateway = Object.values(this.state.com_inds).filter(com_ind => com_ind.pai_id === gateway.id && !com_ind.fim)
      const nome_contrato = this.props.contratos[gateway.contrato_id] && this.props.contratos[gateway.contrato_id].nome
      const sensorchiefs_gateway = Object.values(this.state.sensor_chiefs).find(sensor_chief => sensor_chief.pai_id === gateway.id && !sensor_chief.fim)
      return (
        <React.Fragment key={gateway.id}>
          <div className={classes.gateway_view}>
            <div className={classes.tamanho_itens}>
            <dt>{gateway.nome}
              <a className="fa fa-cog" style={{float: 'right'}} onClick={(gateway) => this.props.abrirJanelaGatewayEdit(gateway)}> </a>
            </dt>
            <dd>Contrato: {nome_contrato || "não definido"}</dd>
            <dd>MAC: {gateway.mac}</dd>
            <dd>id: {gateway.id}</dd>
            <div className={classes.botao_sensorChief}>
              {
                sensorchiefs_gateway && <button style={{
                      color: "white",
                      background: "#3b3b38",
                      border: "1px solid #B0B3B0",
                      borderRadius: "6px"
                    }} variant="outline-danger" onClick={() => this.collapse_sensoreschief(gateway)}>Sensores Chief</button>
              }
            </div>
           </div>

component I want to show / hide:

      { this.state.showMe && (this.state.chiefs_gateway === gateway.id) ?
      <div>
        {Object.values(this.state.sensor_chiefs).map(sensor_chief => {
          return (sensor_chief.pai_id === gateway.id) && <SensorChief
            key={"sensor_chief_" + sensor_chief.id}
            onlick={() => this.setState({showMe: false})}
            attrs={sensor_chief}
            sensores={this.state.sensores}
            medicoes={this.state.medicoes}
            gateways={this.props.gateways}
            tipos_sensor={this.props.tipos_sensor}
            onChangeSensorChief={this.alterarSensorChief}
            onChangeSensor={this.alterarSensor}
            />
          }
        )}
     </div>
      :null}

this code is in the same file

Answer 1

showMe is a boolean that applies to all the cards whereas it should have been able to identify each card uniquely. also you defined chiefs_gateway as an array initially but then you converted it to a string.

You can simply use chiefs_gateway as an array and store all elements that need to be shown in it

collapse_sensoreschief(gateway){
    const index = chiefs_gateway.indexOf(gateway.id);
    if( index > -1) {
       this.setState({chiefs_gateway: [...chiefs_gateway.slice(0, index), ...chiefs_gateway.slice(index + 1)]});
    } else {
       this.setState({chiefs_gateway: chiefs_gateway.concat(gateway.id)});
    }
}

Post this you can use it like

{ this.state.chiefs_gateway.includes(gateway.id) ?
      <div>
        {Object.values(this.state.sensor_chiefs).map(sensor_chief => {
          return (sensor_chief.pai_id === gateway.id) && <SensorChief
            key={"sensor_chief_" + sensor_chief.id}
            onlick={() => this.setState({showMe: false})}
            attrs={sensor_chief}
            sensores={this.state.sensores}
            medicoes={this.state.medicoes}
            gateways={this.props.gateways}
            tipos_sensor={this.props.tipos_sensor}
            onChangeSensorChief={this.alterarSensorChief}
            onChangeSensor={this.alterarSensor}
            />
          }
        )}
     </div>
:null}