Accessing an element inside an array with multiple objects

Question

I'm trying to use an api with football teams, I want to simply render the name of the teams in a div or a list. But it just render the last one.

When I console.log it, it shows all the teams

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      teams: [],
      isLoaded: false
    }
  }
  componentDidMount() {
    fetch('https://www.thesportsdb.com/api/v1/json/1/search_all_teams.php?l=English%20Premier%20League')
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          data: json,
        })
      })
  }
  render() {
    var {
      isLoaded,
      data
    } = this.state;
    if (!isLoaded) {
      return <div> Loading... < /div>
    } else {
      for (var key in data.teams) {
        if (data.teams.hasOwnProperty(key))
          console.log(data.teams[key].strTeam)
      }
      return ( <div className = "App" >
        Premier League Teams!{
          data.teams[key].strTeam
        } </div>
      );
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Please make the snippet run as a minimal reproducible example — mplungjan
– mplungjan, Commented Feb 15, 2020 at 18:09

matthiasgiger · Accepted Answer · 2020-02-15 18:11:26Z

2

Try this:

return (
    <div className="App">
        Premier League Teams!{data.teams.map(team => team.strTeam)}
    </div>
);

This will loop through the teams array with map and render each one.

answered Feb 15, 2020 at 18:11

matthiasgiger

1,26412 silver badges20 bronze badges

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

1 Comment

Junius L Over a year ago

please accept the answer by clicking the arrow next to the answer.

Mujibur Rehman Ansari · Accepted Answer · 2020-02-15 18:15:12Z

Try this,

import React from "react";

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      teams: [],
      isLoaded: false
    };
  }

  componentDidMount() {
    fetch(
      "https://www.thesportsdb.com/api/v1/json/1/search_all_teams.php?l=English%20Premier%20League"
    )
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          data: json
        });
      });
  }

  render() {
    var { isLoaded, data } = this.state;

    if (!isLoaded) {
      return <div>Loading... </div>;
    } else {
      return (
        <div className="App">
          Premier League Teams!
          {data.teams.map(team => (
            <div> {team.strTeam} </div>
          ))}
        </div>
      );
    }
  }
}
export default Test;

Collectives™ on Stack Overflow

Accessing an element inside an array with multiple objects

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related