How to display data with id React Js and Firebase

Question

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 :

I only want the "adresse" of the id where the checkbox is check

Thank you

ERROR :

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: stackoverflow.com/questions/39120007/… — jmargolisvt
– jmargolisvt, Commented Dec 20, 2019 at 18:14

Peter Haddad · Accepted Answer · 2019-12-20 18:00:11Z

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);

edited Dec 20, 2019 at 18:00

answered Dec 20, 2019 at 17:55

Peter Haddad

81.2k26 gold badges148 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Peter Haddad Over a year ago

Check this stackoverflow.com/questions/33117449/… stackoverflow.com/questions/41604539/…

Peter Haddad Over a year ago

You are displaying an object try and display a value for example snapshot.key

skez Over a year ago

I can display this but only on the console.log, I don't know how to display on a h1 for example

Peter Haddad Over a year ago

Read this also w3schools.com/react/react_state.asp

skez Over a year ago

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

Collectives™ on Stack Overflow

How to display data with id React Js and Firebase

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related