CODEWITHSUNDEEP
javascriptreactjsreact-dom
NinjaCoderDotCom
NinjaCoderDotCom

Reputation: 61

How to map JSON data in react js?

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

Upvotes: 4

Views: 33684

Answers (3)

Blazej Kita
Blazej Kita

Reputation: 135

You have set state and then in render function add "map" and return html.

  render()
  {
   
    return(
     <div className='training'>
          <div className='items'>
            {
              this.state.training.map( (row,index)=>{
                 return(
                    <h1>{index}</h1>    
                 )                 
              }) 
            }             
          </div>
     </div>
    )
  }
}

Upvotes: 0

Surjeet Bhadauriya
Surjeet Bhadauriya

Reputation: 7156

You need to export your app component instead of rendering it to the element id app. The problem is it tries to find element id app, but it can't find in the DOM. However index.js do the same thing, so you don't have to do the ReactDOM.render thing.

ReactDOM.render(<App />, document.getElementById("root")); // you will find this line in index.js, you don't need to do this in app.js

Stackblitz Link

import React from "react";

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

export default 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>
  );
}

Upvotes: 1

Mainly Karma
Mainly Karma

Reputation: 477

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;

Upvotes: 2

Related Questions