1

I am trying to display csv file data to frontend in reactjs. i read csv file using papaparse and i am getting all data

["0.122584", "0.785882", "0.954039", "0.353008"]
...
...
["0.122584", "0.785882", "0.886715", "-0.626392"]

and want to to display this array data in the form of table.

I tried this 

class Panel extends React.Component {
  constructor(){
      super();
      this.state={
          csvfile:undefined,
          data:null
      };

  }
  handleChange = event =>{
      this.setState({
          csvfile:event.target.files[0]
      });
  };

  importCSV = () =>{
      const { csvfile } = this.state;
      Papa.parse(csvfile, {
          complete: this.updateData,
          header: false
      });
  };

  updateData(result){
      var data = result.data;
      console.log(">>>>>")
      this.setState({
        data:data
      })
      console.log(data)
  }

render(){
return(
<Table bordered>
                 <thead>
                 <tr>
                    <th>#</th>
                     <th>First Name</th>
                     <th>Last Name</th>
                     <th>Username</th>
                </tr>
                 </thead>
                 <tbody>
                 <tr>
                     <th scope="row">1</th>
                     <td>{this.state.data}</td>
                     <td>Otto</td>
                     <td>@mdo</td>
                </tr>
                </tbody>
             </Table>
)
}

But it is not working well. it is displaying all data in single cell only. i want each value in different cell. I am a beginner in reactJs.

Thanks.

Improve this question
1
  • Is your data an array of object?? Commented Apr 24, 2019 at 12:17

5 Answers 5

Reset to default
5

Hope this can help you! I write two possibilities(tables) there because your question seems unclear to me.

Update Code

class Table extends React.Component{
 data = [
   ["0.122584", "0.785882", "0.954039", "0.353008"],
   ["1", "2", "0.954039", "0.353008"],
 ];
 render(){
   return(
       <table>
         <tbody>
           {
                this.data.map((numList,i) =>(
                   <tr key={i}>
                    {
                      numList.map((num,j)=>
                         <td key={j}>{num}</td>
                      )
                    }
                   </tr>
                ))
           }
         </tbody>
       </table>
   );
 }
}

ReactDOM.render(<Table/>,document.getElementById("root"));
td{
  border:1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

hi hardik, i used above solution . i saved my data in state. and trying to get data in table by this.state.data.map.... getting this error Uncaught TypeError: Cannot read property 'map' of null.
my data is look like this (4) [Array(6), Array(6), Array(6), Array(1)] 0: (6) ["r", "t", "t", "t", "tt", "t"] 1: (6) ["d", "df", "d", "d", "d", "d"] 2: (6) ["s", "hh", "hj", "s", "kk", "s"]
I updated the code. Please try it, hope it can help!
i add this !!this.state.data && this.state.data.map.... and works ....thanks hardik
it is giving one undefined row in the last of table
|
2

You can map though you data and add a <tr> for each this.state.data.

//...your previous code

let tableRows = null;

if (this.state.data) {
  tableRows = <tr>
    {this.state.data.map((data, index) => {
      return (
        <td key={index}>
          {data}
        </td>
      );
    })}
  </tr>
}

return(
  <Table bordered>
    <thead>
      <tr>
        <th>#</th>
      </tr>
    </thead>
    <tbody>
      {tableRows}
    </tbody>
  </Table>

)

Improve this answer

Comments

1

can you provide a snapshot of the data that should be displayed in a single row of your table? The Table component that you have posted has headers for First Name, Last Name, and Username. If the data is properly structured, then you can render it on the screen by modifying your component as follows:

  class Panel extends React.Component {
  constructor(){
      super();
      this.state={
          csvfile:undefined,
          data:null
      };

  }
  handleChange = event =>{
      this.setState({
          csvfile:event.target.files[0]
      });
  };

  importCSV = () =>{
      const { csvfile } = this.state;
      Papa.parse(csvfile, {
          complete: this.updateData,
          header: false
      });
  };

  updateData(result){
      var data = result.data;
      console.log(">>>>>")
      this.setState({
        data:data
      })
      console.log(data)
  }

render(){
return(
<Table bordered>
                 <thead>
                 <tr>
                    <th>#</th>
                     <th>First Name</th>
                     <th>Last Name</th>
                     <th>Username</th>
                </tr>
                 </thead>
                 <tbody>
{this.state.data.map((rowData, index) => (
                 <tr>
                     <th scope="row">{index + 1}</th>
                     <td>{rowData.firstName}</td>
                     <td>{rowData.lastName}</td>
                     <td>{rowData.userName}</td>
                 </tr>

))}

                </tbody>
             </Table>
)
}

Here, I have made the assumption that your data for each row is an object with the properties firstName, lastName, and userName. Let me know if anything is unclear to you.

Improve this answer

Comments

0

You need to create a <td> element for each value in the this.state.data array, here is how you can do that:

<tr>
   ...
   { !!this.state.data && this.state.data.map(value => (<td>{value}</td>)) }
   ...
</tr>
Improve this answer

3 Comments

i tried this but getting this error Uncaught TypeError: Cannot read property 'map' of null
@chandra Oh, that is because data is null at first, I've edited my answer to address that.
it is somewhat working.. it is placing all elements of first array in first cell only. i want all elements of first array in first row, second elements array in second row.....and so on.. i after above solution i got affff,bgggt,cdddd. but it should be like a f f f f then it second row b g g gt....
0

you can use antd :framework for reactjs
so you build columns in an easy way like this 

const columns = [{
      title: 'First Name',
      dataIndex: 'first_name',
      sortDirections: ['descend', 'ascend'],
      key: 'first_name',
      width: '20%',}]

and you can just :

return (

 <Table className="yourClassCss" columns={columns} dataSource={this.state.data} />

    );
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.