React, data display with GitHub api

Question

I am trying to display a list of user repositories. Through the spread operator attempts to spell the object. However, I do not know if this is a good method, there are no errors in the console, but nothing appears on the screen. This is my code.

class ItemUserDetail extends React.Component {
  constructor() {
    super();
    this.state = {
      usersRepos: []
    };
  }

  componentDidMount() {
    const { user } = this.props.match.params;
    const url = `https://api.github.com/users/${user}/repos`;
    fetch(url)
      .then(res => res.json())
      .then(json => this.setState({ usersRepos: json }));
  }

  render() {
    const Repos = this.state.usersRepos ? { ...this.state.usersRepos } : null;
    return (
      <div>
        <p>{Repos.name}</p>
      </div>
    );
  }
}

export default ItemUserDetail;

Adeel Imran · Accepted Answer · 2018-09-02 17:29:59Z

1

Since you are returning an array of repositories, your render method should look like this

render() {
  const Repos = this.state.usersRepos ? this.state.usersRepos : null; // you don't need this
  const { userRepos } = this.state; // destructure 
  return (
      <div>
        {userRepos.map(repo => <p key={repo.id}>{repo.name}</p>)}
      </div>
  );
}

answered Sep 2, 2018 at 17:29

Adeel Imran

14.1k8 gold badges66 silver badges80 bronze badges

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

2 Comments

Elder Over a year ago

I get TypeError: userRepos is undefined :< I dont know why

Adeel Imran Over a year ago

Here is a working example of your code codesandbox.io/s/14r76r1234 Kindly close this question and mark this as your answer if this solves your problem.

Collectives™ on Stack Overflow

React, data display with GitHub api

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related