How to display array data into tables in Reactjs

Question

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.

Answer 1

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>

Answer 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>

)

Answer 3

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.

Answer 4

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>

Answer 5

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} />

    );