title: How to Show and Hide with id when the checkbox is checked
body: <p>I have a problem, I would like to know how to display data thanks to their id when the chebkbox is checked.</p>
  
  <p>For example when the first checkbox is checked I just want the address named "0" and hidde the rest of the others adress I already try to do but I'm stuck and I would like to learn how to do .</p>
  
  <p>I'm using firebase as db :</p>
  
  <p><a href="https://i.stack.imgur.com/NMHe6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NMHe6.png" alt="enter image description here"></a></p>
  
  <pre><code>import React, { Component } from "react";
  import * as firebase from "firebase";
  import { Table, InputGroup } from "react-bootstrap";
  class ListClients extends React.Component {
    state = {
      loading: true,
      selectedOption: "option0",
      selectedStyle : {display : 'none'},
      selectedId : ""
    };
  
    componentWillMount() {
      const ref = firebase
        .database()
        .ref("listClients")
        .orderByChild("id");
      ref.on("value", snapshot =&gt; {
        this.setState({
          listClients: snapshot.val(),
          loading: false
        });
  
      });
    }
  
    handleOptionChange = changeEvent =&gt; {
  
      this.setState({
        selectedOption: changeEvent.target.value,
        selectedStyle : {display : 'block'},
        selectedId: 1
      });
  
  
    };
  
    render() {
      let selectedStyle = this.state.selectedStyle
  
      if (this.state.loading) {
        return &lt;h1&gt;Chargement...&lt;/h1&gt;;
      }
      const clients = this.state.listClients.map((client, i) =&gt; (
        &lt;tr&gt;
          &lt;td&gt;
            &lt;input
              key={client + i}
              id={"checkbox" }
              type="checkbox"
              value={"option"+i}
  
              onChange={this.handleOptionChange}
              checked={this.state.selectedOption === "option"+i}
            /&gt;
          &lt;/td&gt;
          &lt;td&gt;{client.nom}&lt;/td&gt;
          &lt;td&gt;{client.prenom}&lt;/td&gt;
        &lt;/tr&gt;
      ));
  
      const clientAdr = this.state.listClients.map((client, i) =&gt; (
        &lt;tr key={i}&gt;
          &lt;td id={"myDIV" + i}   value={"option"+i} onChange={this.handleOptionChange} style={selectedStyle}&gt;
            {client.adresse}
          &lt;/td&gt;
        &lt;/tr&gt;
      ));
  
  
  
  
      return (
        &lt;&gt;
          &lt;Table className="ContentDesign" striped bordered hover&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th&gt;&lt;/th&gt;
  
                &lt;th&gt;First Name&lt;/th&gt;
                &lt;th&gt;Last Name&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;{clients}&lt;/tbody&gt;
          &lt;/Table&gt;
  
          &lt;Table className="ContentDesign" striped bordered hover&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th&gt;Adresse : &lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
  
            &lt;tbody&gt;{clientAdr}&lt;/tbody&gt;
          &lt;/Table&gt;
        &lt;/&gt;
      );
    }
  }
  
  export default ListClients;
  
  </code></pre>
  
  <p>What I have for the moment : </p>
  
  <p><a href="https://i.stack.imgur.com/MS83A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MS83A.png" alt="enter image description here"></a></p>