2

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?

2
  • Yes. I unticked the Babel/ES 2015 box and manually added my own Babel script reference.
    – Ben Aston
    Commented Oct 4, 2021 at 14:11
  • Yes. On the other hand, thank heavens the Web platform is flexible enough for us to work around the limitation.
    – Ben Aston
    Commented Oct 4, 2021 at 14:16

1 Answer 1

2

To use any version other than the one integrated with the Stack Snippets, you have to put the script code in a script type="text/babel" tag in the HTML panel, not in the JavaScript panel:

* {
  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>
<script type="text/babel">
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')
)
</script>
<script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>

2
  • OK. I missed that part of the answer on meta. Thank you!
    – Ben Aston
    Commented Oct 4, 2021 at 14:12
  • @BenAston - No worries! I just edited that answer to call it out. Commented Oct 4, 2021 at 14:13

Not the answer you're looking for? Browse other questions tagged .