Converting column data into a string in <CSVLink/> React JSX

Admin 1
Viewed 786

I'm fairly new to JS and JSX and learning as I go.

I made a button to download a CSV file containing the {data} and {columns} from a db2 table. When I output this data on the page itself, the phone numbers look normal: 199028675309.

But when I attempt to download it as a CSV using <CSVLink/>, the phone numbers get converted to scientific notation in the CSV file, like this: 1.99029E+11

I know I need to change the phone numbers to a string, but I tried using DataType='String' in the tag. Then I tried adding DataType:'string' in the columns below, but none of this changed anything.

Is it possible to change the phone number data types before the file is downloaded so the numbers are not in scientific notation? How would this be done?

I put a code snippet below:

export default function Home() { 
  const [data, setData] = useState([]);
  const fetchData = async (e) => {
    e.preventDefault();
    const response = await fetch("/.../somedatabase", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      }});
    if (!response.ok) {
      throw new Error(`Error: ${response.status}`);
    }
    console.log(response);
    const responseJson = await response.json();
    console.log(responseJson);
    setData(responseJson);
  };
    const { body,validationResult } = require('express-validator');
    const columns = [{
        dataField: 'Calling Phone',
        text: 'Calling Phone'
      }, {
        dataField: 'Called Phone',
        text: 'Called Phone'
      }];
      return (
      <div>
        <main>
            <button> 
            { data.length ? 
            <CSVLink data={data} columns={columns} filename={'testfile'} target="_blank">
              Download CSV 
            </CSVLink> 
            : null } 
            </button>
        </main>
      </div>
jsx reactjs export-to-csv csv javascript
2 Answers

I was able to resolve this keeping Ghan's answer in mind. I added after console.log(response) a responseJson.forEach, forcing the changes with a new name element["Calling Phone CSV"].

    if (!response.ok) {
      throw new Error(`Error: ${response.status}`);
    }
    console.log(response);
    const responseJson = await response.json();
    responseJson.forEach(element => {      
      element["Calling Phone CSV"] = `=""${element["Calling Phone"]}""`;
      element["Called Phone CSV"] = `=""${element["Called Phone"]}""`
    });
    console.log(responseJson);
    setData(responseJson);
  };

Then under columns, I basically copied it and pasted a new one under it, then gave it a new name (e.g. columnsCSV)

      const columnsCSV = [{
        key: 'Calling Phone CSV',
        label: 'Calling Phone'
      }, {
        key: 'Called Phone CSV',
        label: 'Called Phone'
      }];

Then in the return, I edited the CSVLink to be:

{ data.length ? 
<CSVLink data={data} columns={columnsCSV} filename={'testfile'} target="_blank">
  Download CSV 
</CSVLink> 
: null }

And that's basically it.

Admin1

It is your spreadsheet application making that change. It can not be enforced what type of column should be assumed by an application(in which you are opening your CSV files). If you want to show it correctly you need to put ="" before the text and an extra two quotes after. Change the data as shown by Michael McCabe in the library issue: CSV Link library issue

Adding a sandbox(which downloads the csv file using react-csv-2.2.2) link here. You have to iterate over the data and change the Phone number specifically in the mentioned format

const csvData = [
  {
    firstname: '=""468768768833943384""',
    lastname: 'me',
    email: 'me@something.com'
  }
];

Result:

enter image description here

user_12636860
Related