How to render the data in table fetches from firestore?

Question

I'm using react with firestore fetch data from firebase and display the data using Bootstrap Table but problem is that data is already pushed into the list but if I'm trying to displaying through the bootstrap table it will not render. I already console.log() on my data it will print in but not display.

Anyone any idea what the problem is this?

Output image

Here it is my code as well as the browser there is table is printed and console.log() the data is fetched from firebase and store in a list. and I am trying to look into the list but it works data is in the list

import React, { useEffect, useState } from "react";
import { db } from "../firebase/fireConfig";
import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";
import * as ReactBootstrap from "react-bootstrap";

function Table() {
  const [speedData, setSpeedData] = useState([]);

  useEffect(() => {
    db.collection("vehicle")
      .doc("speed_sensor")
      .collection("speed")
      .orderBy("timestamp", "asc")
      .get()
      .then((snapshot) => {
        const speed_value = [];
        snapshot.forEach((doc) => {
          const data = doc.data();
          speed_value.push(data);
          console.log(`SpeedData :=>> ${data.speed}`);
        });
        setSpeedData({ speedData: speed_value });
      })
      .catch((error) => console.log(error));
  }, []);

  console.log(speedData);
  const colums = [
    { dataField: "timestamp", text: "Timestamp" },
    { dataField: "speed", text: "Speed" },
  ];

  return (
    <div>
      <BootstrapTable
        keyField="timestamp"
        data={speedData}
        columns={colums}
        pagination={paginationFactory()}
      />
    </div>
  );
}

export default Table;

Answer 1

I modified the above code and it works perfectly.

import React, { useEffect, useState } from "react";
import { db } from "../firebase/fireConfig";
import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";
import ToolkitProvider, { Search } from "react-bootstrap-table2-toolkit";
import * as ReactBootstrap from "react-bootstrap";
import charts from "fusioncharts/fusioncharts.charts";
import ReactFusioncharts from "react-fusioncharts";
import Widgets from "fusioncharts/fusioncharts.widgets";
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";
import ReactFC from "react-fusioncharts";
import FusionCharts from "fusioncharts";
import "./SpeedLog.css";

function SpeedLog() {
  // define chart props
  ReactFC.fcRoot(FusionCharts, Widgets, FusionTheme);

  // Resolves charts dependancy
  charts(FusionCharts);

  const [loading, setLoading] = useState(false);
  const [speedData, setSpeedData] = useState([]);

  let lastItem;
  let lastSpeed = 0;

  useEffect(() => {
    db.collection("data")
      .doc("MP10ME7969")
      .collection("speed")
      .orderBy("id", "asc")
      .onSnapshot((docs) => {
        const speed_value = [];
        docs.forEach((doc) => {
          speed_value.push(doc.data());
        });
        setSpeedData(speed_value);
        setLoading(true);
      });
  }, []);

  lastItem = speedData[speedData.length - 1];
  if (lastItem !== undefined) {
    const obj = Object.entries(lastItem);
    obj.forEach(([key, value]) => {
      if (key === "speed") {
        lastSpeed = value;
      }
    });
  }

  lastItem = speedData[speedData.length - 1];
  if (lastItem !== undefined) {
    const obj = Object.entries(lastItem);
    obj.forEach(([key, value]) => {
      if (key === "speed") {
        lastSpeed = value;
      }
    });
  }

  // config widget
  const dataSource = {
    chart: {
      captionpadding: "0",
      origw: "320",
      origh: "300",
      gaugeouterradius: "115",
      gaugestartangle: "270",
      gaugeendangle: "-25",
      showvalue: "1",
      valuefontsize: "30",
      majortmnumber: "13",
      majortmthickness: "2",
      majortmheight: "13",
      minortmheight: "7",
      minortmthickness: "1",
      minortmnumber: "1",
      showgaugeborder: "0",
      theme: "fusion",
    },
    colorrange: {
      color: [
        {
          minvalue: "0",
          maxvalue: "85",
          code: "#999999",
        },
        {
          minvalue: "85",
          maxvalue: "180",
          code: "#F6F6F6",
        },
      ],
    },
    dials: {
      dial: [
        {
          value: lastSpeed,
          bgcolor: "#F20F2F",
          basewidth: "8",
        },
      ],
    },
    annotations: {
      groups: [
        {
          items: [
            {
              type: "text",
              id: "text",
              text: "kmph",
              x: "$gaugeCenterX",
              y: "$gaugeCenterY + 40",
              fontsize: "20",
              color: "#555555",
            },
          ],
        },
      ],
    },
  };

  const columns = [
    {
      text: "SPEED",
      dataField: "speed",
    },
    {
      text: "TIMESTAMP",
      dataField: "timestamp",
    },
  ];

  const defaultSorted = [
    {
      dataField: "id",
      order: "asc",
    },
  ];

  

  return (
    <div className="speedlog">
      <div className="speedlog_widget">
        <ReactFusioncharts
          type="angulargauge"
          width="50%"
          height="50%"
          dataFormat="JSON"
          dataSource={dataSource}
        />
      </div>
      <div className="speedlog_table">
        {loading ? (
          <ToolkitProvider
            bootstrap4
            keyField="id"
            data={speedData}
            columns={columns}
            search
          >
            {(props) => (
              <div>
                <hr />
                <BootstrapTable
                  defaultSorted={defaultSorted}
                  pagination={paginationFactory()}
                  {...props.baseProps}
                />
              </div>
            )}
          </ToolkitProvider>
        ) : (
          <ReactBootstrap.Spinner animation="border" />
        )}
      </div>
    </div>
  );
}

export default SpeedLog;

Answer 2

In react hooks, which you are using here, you just need to call the state method, which is setSpeedData here and pass in value which is speed_value here and it'll automatically set the state speedData because the setSpeedData method is already assigned to set the state for 'speedData'

So, try setSpeedData(speed_value) instead of setSpeedData({ speedData: speed_value })