Parse a JSON and Populate into a Table in React JS

Question

I need to parse a CSV File to JSON and Populate it into a Table. I've use PapaParse to parse CSV into a JSON but some of the keys of the JSON have a space in between. I need help in order to do the latter and couldn't figure out what to do.

My code is:

<table>
    <thead>
        <tr>
            <th scope="col">Column 1</th>
            <th scope="col">Column 2</th>
            <th scope="col">Column 3</th>
            <th scope="col">Column 4</th>
        </tr>
    </thead>
    <tbody>
    {
        this.state.csvdata.map((jsondata, key) => {
            return(
                <tr key={key}>
                    <td>{ jsondata.Column 1 }</td>  //This is where I need help!!
                    .
                    ..
                    ...
                    ....
                    .....
                </tr>
            )
        })
    }
    </tbody>
</table>

The format of the JSON is:

[
   {
      Column 1: "Field 1",
      Column 2: "Field 2",
      Column 3: "Field 3",
      Column 4: "Field 4"
   },
   {
      Column 1: "Field 1",
      Column 2: "Field 2",
      Column 3: "Field 3",
      Column 4: "Field 4"
   },
   {
      Column 1: "Field 1",
      Column 2: "Field 2",
      Column 3: "Field 3",
      Column 4: "Field 4",
   }
]

Answer 1

You need to put quotes around the key in json:

"Column 1": "Field 1", 
...

Then you can access it like this:

<td>{ jsondata["Column 1"] }</td>