Build an HTML table using React from arrays [closed]

by

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>

More Related Contents:

  1. react similar JavaScript library [closed]
  2. if-else statement inside jsx: ReactJS
  3. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
  4. Correct path for img on React.js
  5. OnChange event using React JS for drop down
  6. How to use Redirect in version 5 of react-router-dom of Reactjs
  7. How do I set multipart in axios with react?
  8. how to download file in react js
  9. OnClick Event binding in React.js
  10. React doesn’t reload component data on route param change or query change
  11. Can I add a key prop to a React fragment?
  12. How to import image (.svg, .png ) in a React Component
  13. Typescript: React event types
  14. firebase.auth is not a function
  15. How to loop an object in React?
  16. Best way to polyfill ES6 features in React app that uses create-react-app
  17. How to update state with usestate in an array of objects?
  18. How to print React component on click of a button?
  19. How to render Streamable image on React coming from FastAPI server?
  20. Determine which dependency array variable caused useEffect hook to fire
  21. unable to deploy next js to azure
  22. What does “export default” do in JSX?
  23. Axios – DELETE Request With Request Body and Headers?
  24. Updating state to the same state directly in the component body
  25. how to set up an inline svg with webpack
  26. Jest – SyntaxError: Cannot use import statement outside a module
  27. Does strict mode work differently with React 18?
  28. Firebase-Admin, importing it to react application throws Module not found error
  29. How to prevent Next.js from instantiating a singleton class/object multiple times?
  30. How to dynamically import SVG and render it inline

Leave a Comment