Sometimes, we want to create a simple table with React and JavaScript.
In this article, we’ll look at how to create a simple table with React and JavaScript.
How to create a simple table with React and JavaScript?
To create a simple table with React and JavaScript, we can use the array map method.
For instance, we write:
import React from "react";
const arr = [
{ firstName: "john", lastName: "smith" },
{ firstName: "jane", lastName: "doe" },
{ firstName: "mary", lastName: "smith" }
];
export default function App() {
const rows = arr.map((a) => {
const { firstName, lastName } = a;
return (
<tr>
<td>{firstName}</td>
<td>{lastName}</td>
</tr>
);
});
return (
<div>
<table>
<tbody>{rows}</tbody>
</table>
</div>
);
}
We call arr.map with a callback that returns the table rows which we create by populating it with the arr entry’s values.
Then we put the row in between the tbody tags to add the rows as the children of tbody.
Therefore, we see:
john smith
jane doe
mary smith
displayed.
Conclusion
To create a simple table with React and JavaScript, we can use the array map method.
