0

I'm working on a project, and I would like to display some data from my firebase database,

I can show some of them, but I want to display the rest of the data of my "listClients" on a box, linked to the checkbox with the id.

listClients.js it's where i map the data from the db 

import React, { Component } from "react";
import * as firebase from "firebase";
import { Table, InputGroup } from "react-bootstrap";
class ListClients extends React.Component {
  state = {
    loading: true
  };

  componentWillMount() {
    const ref = firebase.database().ref("listClients");
    ref.on("value", snapshot => {
      this.setState({ listClients: snapshot.val(), loading: false });
    });
  }

  render() {
    if (this.state.loading) {
      return <h1>Chargement...</h1>;
    }

    const clients = this.state.listClients.map((client, i) => (
      <tr key={i}>
        <td>
          <input id={client.id} type="checkbox" onChange={this.cbChange} />
        </td>
        <td>{client.nom}</td>
        <td>{client.prenom}</td>
      </tr>
    ));
    const clientsAdresses = this.state.listClients.map((clientAdresse, i) => (
      <tr key={i}>
        <td id={clientAdresse.id}>{clientAdresse.adresse}</td>
      </tr>
    ));

    return (
      <>
        <Table className="ContentDesign" striped bordered hover>
          <thead>
            <tr>
              <th></th>

              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>{clients}</tbody>
        </Table>

        <Table className="ContentDesign" striped bordered hover>
          <thead>
            <tr>
              <th>Adresse : </th>
            </tr>
          </thead>


          <tbody>{clientsAdresses}</tbody>


        </Table>
      </>
    );
  }
}

export default ListClients;

my data : enter image description here

I only want the "adresse" of the id where the checkbox is check enter image description here

Thank you

ERROR : enter image description here

skez
  • 51
  • 8
  • 1
    That error is a different problem. You get that error when you try to display an object in React. You'll need to pull your response apart before trying to display it. To keep track of what's checked, google "controlled components" and see if this helps: https://stackoverflow.com/questions/39120007/setting-a-checkbox-check-property-in-react – jmargolisvt Dec 20 '19 at 18:14

1 Answers1

1

To retrieve the adresse from the database then use the following code:

componentWillMount() {
const ref = firebase.database().ref("listClients");
    ref.on("value", snapshot => {
       snapshot.forEach((subSnap) => {
      let address = subSnap.val().adresse;
      });
    });
  }

First add a reference to node listClients the using forEach you can iterate and retrieve the adresse

If you want to get the adresse according to the id, then you can use a query:

const ref = firebase.database().ref("listClients").orderByChild("id").equalTo(0);
Peter Haddad
  • 78,874
  • 25
  • 140
  • 134
  • 1
    Check this https://stackoverflow.com/questions/33117449/invariant-violation-objects-are-not-valid-as-a-react-child https://stackoverflow.com/questions/41604539/objects-are-not-valid-as-a-react-child – Peter Haddad Dec 20 '19 at 18:13
  • 1
    You are displaying an object try and display a value for example `snapshot.key` – Peter Haddad Dec 20 '19 at 18:49
  • I can display this but only on the console.log, I don't know how to display on a h1 for example – skez Dec 20 '19 at 19:03
  • 1
    Read this also https://www.w3schools.com/react/react_state.asp – Peter Haddad Dec 20 '19 at 19:32
  • Nice thank you, it's working, I display every address, but now when I click on a button radio I would like just the areas where the radio is checked – skez Dec 20 '19 at 20:49