Tengo un problema, me gustaría saber cómo mostrar datos gracias a su identificación cuando se marca el chebkbox.

Por ejemplo, cuando se marca la primera casilla de verificación, solo quiero la dirección llamada «0» y ocultar el resto de las direcciones que ya intento hacer, pero estoy atascado y me gustaría aprender cómo hacerlo.

Estoy usando firebase como db:

ingrese la descripción de la imagen aquí

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 ={amp}gt; { this.setState({ listClients: snapshot.val(), loading: false }); }); } handleOptionChange = changeEvent ={amp}gt; { this.setState({ selectedOption: changeEvent.target.value, selectedStyle : {display : 'block'}, selectedId: 1 }); }; render() { let selectedStyle = this.state.selectedStyle if (this.state.loading) { return {amp}lt;h1{amp}gt;Chargement...{amp}lt;/h1{amp}gt;; } const clients = this.state.listClients.map((client, i) ={amp}gt; ( {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt; {amp}lt;input key={client   i} id={"checkbox" } type="checkbox" value={"option" i} onChange={this.handleOptionChange} checked={this.state.selectedOption === "option" i} /{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{client.nom}{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{client.prenom}{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; )); const clientAdr = this.state.listClients.map((client, i) ={amp}gt; ( {amp}lt;tr key={i}{amp}gt; {amp}lt;td id={"myDIV"   i} value={"option" i} onChange={this.handleOptionChange} style={selectedStyle}{amp}gt; {client.adresse} {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; )); return ( {amp}lt;{amp}gt; {amp}lt;Table className="ContentDesign" striped bordered hover{amp}gt; {amp}lt;thead{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;First Name{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Last Name{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;tbody{amp}gt;{clients}{amp}lt;/tbody{amp}gt; {amp}lt;/Table{amp}gt; {amp}lt;Table className="ContentDesign" striped bordered hover{amp}gt; {amp}lt;thead{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;Adresse : {amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;tbody{amp}gt;{clientAdr}{amp}lt;/tbody{amp}gt; {amp}lt;/Table{amp}gt; {amp}lt;/{amp}gt; ); } } export default ListClients; 

Lo que tengo por el momento:

ingrese la descripción de la imagen aquí

prueba esto:

 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 : "", cliAdress : null }; componentWillMount() { const ref = firebase .database() .ref("listClients") .orderByChild("id"); ref.on("value", snapshot ={amp}gt; { this.setState({ listClients: snapshot.val(), loading: false }); }); } handleOptionChange = changeEvent ={amp}gt; { const clientAdr = this.state.listClients.map((client, i) ={amp}gt; ( {"option" i === changeEvent.target.value ? {amp}lt;tr key={i}{amp}gt; {amp}lt;td id={"myDIV"   i} value={"option" i} style={this.state.selectedStyle}{amp}gt; {client.adresse} {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; :"" } )); this.setState({ selectedOption: changeEvent.target.value, selectedStyle : {display : 'block'}, selectedId: 1, cliAdress: clientAdr }); }; render() { let selectedStyle = this.state.selectedStyle if (this.state.loading) { return {amp}lt;h1{amp}gt;Chargement...{amp}lt;/h1{amp}gt;; } const clients = this.state.listClients.map((client, i) ={amp}gt; ( {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt; {amp}lt;input key={client   i} id={"checkbox" } type="checkbox" value={"option" i} onChange={this.handleOptionChange} checked={this.state.selectedOption === "option" i} /{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{client.nom}{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{client.prenom}{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; )); return ( {amp}lt;{amp}gt; {amp}lt;Table className="ContentDesign" striped bordered hover{amp}gt; {amp}lt;thead{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;First Name{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Last Name{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;tbody{amp}gt;{clients}{amp}lt;/tbody{amp}gt; {amp}lt;/Table{amp}gt; {amp}lt;Table className="ContentDesign" striped bordered hover{amp}gt; {amp}lt;thead{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;Adresse : {amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;tbody{amp}gt;{this.state.cliAdress}{amp}lt;/tbody{amp}gt; {amp}lt;/Table{amp}gt; {amp}lt;/{amp}gt; ); } } 

tal vez tenga algunos errores de compilación, porque no se compila y prueba,

Babak Yaghoobi

es un nuevo contribuyente a este sitio. Tenga cuidado al pedir aclaraciones, comentarios y respuestas. Mira nuestro

Código de Conducta

.