How to map JSON data in react js?

Question

I want to map JSON data in key-value manner. I tried it doing on stackblitz but it is showing error.

THE CODE I WROTE:

import React from "react";
import ReactDOM from "react-dom";

const sampleJSON = {
  name: "Pluralsight",
  number: 1,
  address: "India",
  website: "https://www.pluralsight.com/"
};

function App() {
  return (
    <div>
      {Object.keys(sampleJSON).map((key, i) => (
        <p key={i}>
          <span>Key Name: {key}</span>
          <span>Value: {sampleJSON[key]}</span>
        </p>
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("app"));

THE ERROR I AM GETTING IS:

Error in /turbo_modules/[email protected]/cjs/react-dom.development.js (26083:13) Target container is not a DOM element.

https://stackblitz.com/edit/react-lyrp91

Answer 1

You must export default react components. I got it working in a sandbox (link), by changing this line

ReactDOM.render(<App />, document.getElementById("app"));

to this

export default App;