Accessing json file in react js

Question

This is my code:

class App extends Component {
  constructor() {
    super();
    this.state = {
      data: [
        {
          name: 'Jal Irani',
          imgURL: './man.jpg',
          hobbyList: ['Front-end Web Development', 'Back-end Web Development', 'Eating Free Food'],
        },
      ],
    };
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to Profiler</h1>
        </header>
        <p className="App-intro">//access the json data here</p>
      </div>
    );
  }
}

I want to access the json element in

<p className="App-intro">//access the json data here.

I have tried to use react map function without success.

Is there any help. AM new in react js.

Naor Tedgi · Accepted Answer · 2018-05-08 15:13:35Z

1

import React from "react";
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [
        {
          name: "Jal Irani",
          imgURL: "./man.jpg",
          hobbyList: [
            "Front-end Web Development",
            "Back-end Web Development",
            "Eating Free Food"
          ]
        }
      ]
    };
  }

  render() {
    const { name, imgURL, hobbyList } = this.state.data[0];
    console.log(name);
    console.log(imgURL);
    console.log(hobbyList);
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to Profiler</h1>
        </header>
        <p className="App-intro" />
      </div>
    );
  }
}

answered May 8, 2018 at 15:13

Naor Tedgi

5,7473 gold badges29 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Naor Tedgi Over a year ago

glad I could help.

Artem Mirchenko · Accepted Answer · 2018-05-08 15:07:39Z

1

Did you tried to map over your state data object?

render() {
 return (
  <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h1 className="App-title">Welcome to Profiler</h1>
    </header>

 {this.state.data.map((dataItem, i) => 
    <div key={i}>
      <span>{dataItem.name}</span>
      <img src={dataItem.imgURL}/>
      <ul>
        {dataItem.hobbyList.map((item, i) => <li key={i}>{item}</li>)}
      </ul>
    </div>
  )}
  </div>
);
}

answered May 8, 2018 at 15:07

Artem Mirchenko

2,1701 gold badge11 silver badges21 bronze badges

Comments

Roy Wang · Accepted Answer · 2018-05-08 15:08:06Z

1

You can render the data like this:

<p className="App-intro">
  <span>{this.state.data[0].name}</span>
  {this.state.data[0].hobbyList.map(e => <span key={e}>{e}</span>)}
</p>

edited May 8, 2018 at 15:08

answered May 8, 2018 at 15:03

Roy Wang

11.3k2 gold badges26 silver badges44 bronze badges

5 Comments

Igor Alemasow Over a year ago

don't forget to add a key to span

ngahu daniel Over a year ago

Am getting an error that 'e' is not defined no-undef

Roy Wang Over a year ago

Missed a closing bracket after </span>. Try the updated code again.

Igor Alemasow Over a year ago

don't use whole object as a key, use index: .map((e, i) => <span key={i}>{e}</span>)

Roy Wang Over a year ago

@IgorAlemasow e is a string, not an object. Also using index as key is discouraged: reactjs.org/docs/lists-and-keys.html#keys

Collectives™ on Stack Overflow

Accessing json file in react js

3 Answers 3

1 Comment

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related