CODEWITHSUNDEEP
javascriptarraysjsonreactjs
Chris
Chris

Reputation: 1

React json get value

I am new to react and started looking into pulling json data in. To test I am using: https://randomuser.me/api/?results=5

What I am trying to achieve is when I click on a username from json, it will console log the username. How do I pass the value from json to console log? 

const API = 'https://randomuser.me/api/?results=5';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      logins: [],
    };
  }

  componentDidMount() {
    fetch(API)
      .then(response => response.json())
      .then(data => {
        let logins = data.results.map((uname) => {
          return (
            <div>
              <button>{uname.login.username}</button>
            </div>
          )
        })
        this.setState({logins: logins});
      })
  }

  render() {
    return (
      <div>
        {this.state.logins}
      </div>
    );
  }
}

Is it a good idea to return html code in componentDidMount or should I leave it to render?

Upvotes: 0

Views: 102

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074276

You can do what you like, but typically you'd leave component creation (it's not really HTML) to render:

const API = 'https://randomuser.me/api/?results=5';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      logins: [],
    };
  }

  componentDidMount() {
    fetch(API)
      .then(response => response.json())
      .then(data => {
        this.setState({logins: data.results});
      })
  }

  render() {
    return (
      <div>
        {this.state.logins.map((uname) => (
            <div>
              <button>{uname.login.username}</button>
            </div>
        ))}
      </div>
    );
  }
}

state should typically hold data, and leave the rendering of that data to render.

Side note: Your fetch call is missing two things:

  1. A check for ok status, and

  2. An error handler

    fetch(API)
  .then(response => {                             // ***
    if (!response.ok) {                           // ***
      throw new Error({status: response.status}); // ***
    }                                             // ***
  })                                              // ***
  .then(response => response.json())
  .then(data => {
    // ...
  })
  .catch(err => {                                 // ***
    // Handle the error                           // ***
  });                                             // ***

fetch doesn't reject on status errors like 404.

Upvotes: 1

Prince Hernandez
Prince Hernandez

Reputation: 3721

Actually you can do whatever you want, but for reading/usage purposes, it would be better to have all the html on the render. so changing your code should be like:

const API = 'https://randomuser.me/api/?results=5';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      logins: [],
    };
  }

  componentDidMount() {
    fetch(API)
      .then(response => response.json())
      .then(data => {
        let logins = data.results.map((uname) => {
          return uname.login.username;
        })
        this.setState({logins: logins});
      })
  }

  render() {
    return (
      <div>
      {
          this.state.logins.map(u=> {
              <div>
                  <button>{u}</button>
              </div>
          })
      }
      </div>
    );
  }
}

Upvotes: 0

Related Questions