React - csv not seeing my array?

Question

csv

Hello, please help me to solve the problem:

Here is my code:

import React from "react";
import axios from 'axios';
import { CSVLink } from "react-csv";

export default class Bookkeepings extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
     rows: []
  }
componentDidMount () {
      axios.get(API+"referenceData", {
      })
      .then(res => {
         this.setState({
            rows: res.data
         })
         console.log(rows);
       })
 }
 render () {
 const { rows } =this.state
  return (
   <div className="container">
          <CSVLink
            data={rows}
            separator={";"}
            filename={"my-file.csv"}
            className="btn btn-primary"
            target="_blank"
            >
            Download me
          </CSVLink>)
 }
}

console:

(3) [{…}, {…}, {…}]
 0: {ownerKey: "test_owner", accountNumber: "54325672098734"}
 1: {ownerKey: "test_owner", accountNumber: "82039564645380"}
 2: {ownerKey: "test_owner2", accountNumber: "92637479276455"}
 length: 3
 __proto__: Array(0)

In this case, after downloading the file, I get an empty CSV .

If I enter in Render :

const rows = [
      { firstname: 'Ahmed', lastname: 9, email: '[email protected]' }
    ];

then the CSV file contains data with const rows

Thank you very much in advance.

Answer 1

Add a key to your CSVLink. One that depends on the contents of rows.