Invalid prop `data` of type `number` supplied to `DataProvider`, expected `array`. React-bootstrap-table2, Firebase Realtime Database

Question

I've been trying to retrieve data from Firebase Realtime Database and display it in react-bootstrap-table2, but I've run into some issues when it comes to actually displaying the data. When I run the code I get an error: Failed prop type: Invalid prop data of type number supplied to DataProvider , expected array .

Here is my code:

const App = () => {
  const [timestamp, setTimestamp] = useState([]);
  const [loading, setLoading] = useState(false);
  const getTimestamp = () => {
    const database = db.ref("timestamped_measures");
    database.on("value", (ts_measures) => {
      ts_measures.forEach((ts_measure) => {
        setTimestamp(ts_measure.val().timestamp);
      });
    });
  };

  const columns = [{ dataField: "timestamp", text: "Timestamp" }];
  useEffect(() => {
    getTimestamp();
  }, []);
  return (
    <div className="App">
      <BootstrapTable
        keyField="timestamp"
        data={timestamp}
        columns={columns}
        pagination={paginationFactory()}
      />
    </div>
  );
};

export default App;

This is what my Firebase database looks like

Any help would be appreciated!

Edit: console.log(timestamp) console.log(typeof timestamp)

Answer 1

You need to map your timestamp results from ts_measures into an array, and store it in state. I assume, since your columns contain a datafield "timestamp", each of your data rows would require this key which would hold the data for the TimeStamp column.

{timestamp: ts_measure.val().timestamp} 

Give this a shot

const getTimestamp = () => {
  const database = db.ref("timestamped_measures");
  database.on("value", (ts_measures) => {
   setTimestamp(ts_measures.map((ts_measure) => {
      return {timestamp: ts_measure.val().timestamp}
    }));
  });
};