Build an HTML table using React from arrays [closed]

You can create your table using Table function and EachRow function.

var headers=['heading1','heading2'];
var values=[['1','2'],['3','4']];

var Table = (props) => {
  return (
  	<table className="table">
    	<thead>
      	<tr>
      		{props.headers.map(header => <th>{header}</th>)}
		    </tr>
      </thead>
      <tbody>
      	{props.values.map(row => <EachRow row={row} />)}
        </tbody>
    </table>
  );
};

var EachRow = (props) => {
	return (
  <tr>
    {props.row.map(val => <td>{val}</td>)}
  </tr>
  )
};

ReactDOM.render(
  <Table headers={headers} values={values} />,
  document.getElementById('content')
);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='content'></div>

Browse More Popular Posts

Leave a Comment