This works (a trivial React component that prints an HTML table):
const Table = ({ data = [] }) => {
return (
<table>
{
data.map((row) =>
<tr>
{Object.values(row).map((cell) => <td>{cell}</td>)}
</tr>)
}
</table>
)
}
const json = `
[{ "id": 1, "name": "cat" },
{ "id": 2, "name": "dog" },
{ "id": 3, "name": "rabbit" }]`
ReactDOM.render(
<Table data={JSON.parse(json)}/>,
document.querySelector('main')
)
* {
font-family: Courier;
box-sizing: border-box;
padding: 7pt;
border-spacing: 0;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<main></main>
This has a more modern version of Babel manually added because I want to use async
/await
syntax, and it throws the following error:
"Uncaught SyntaxError: Unexpected token '<'",
const Table = ({ data = [] }) => {
return (
<table>
{
data.map((row) =>
<tr>
{Object.values(row).map((cell) => <td>{cell}</td>)}
</tr>)
}
</table>
)
}
const json = `
[{ "id": 1, "name": "cat" },
{ "id": 2, "name": "dog" },
{ "id": 3, "name": "rabbit" }]`
ReactDOM.render(
<Table data={JSON.parse(json)}/>,
document.querySelector('main')
)
* {
font-family: Courier;
box-sizing: border-box;
padding: 7pt;
border-spacing: 0;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
<script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<main></main>
Why?
script
reference.