Accessing certain item after fetching data from API with react

Cuzto Published at Dev

Cuzto

I am learning react and stumbled on something that seems like an absolute beginner problem. Anyway I am fetching data from an API and would like to know how to get a certain element from the JSON. I have tried different variations with [] but with no success.

JSON:

[{"name":"gfhf","id":1,"organizer":"hfgh"},{"name":"World Cup","id":2,"organizer":"FIFA"}]

React code:

import React, { Component } from "react";
import Tournaments from "./Tournaments";

const tournyAPI = 'http://localhost:8080/api/tournaments';

class template extends Component {

  constructor() {
    super();
    this.state = {
      data: [],
    }
  }

  componentDidMount() {
    fetch(tournyAPI)
    .then((Response) => Response.json())
    .then((findresponse) => {
      console.log(findresponse)
      this.setState({
        data:findresponse,
      })
    })
  }

  render() {
    return (
      <div class="container">
        <div class="row">
          <div class="col-md-6 col-md-offset-3">
            <div class="jumbotron text-center">
            {
              this.state.data.map((dynamicData, key) =>
              <div>
                <h1>{dynamicData.name}</h1>
              </div>
              )
            }
          </div>
        </div>
      </div>
    </div>
    );
  }
}


export default template;

My goal would be to display only World cup for example.

ivp

You can filter out whatever you want from the response from the API. Like below:

Notice the line findresponse.filter(res => res.name === "World Cup");

componentDidMount() {
  fetch(tournyAPI)
  .then((Response) => Response.json())
  .then((findresponse) => {
    console.log(findresponse)
    findresponse.filter(res => res.name === "World Cup");
    this.setState({
      data:findresponse,
    })
  })
}

Collected from the Internet

Please contact [email protected] to delete if infringement.