CODEWITHSUNDEEP
javascriptreactjs
MillsBills
MillsBills

Reputation: 49

Getting object data from API and then displaying it (React Fetch)

I'm trying to extract the data from this API https://fe-assignment.vaimo.net/ to render the object name. It should be a drone sale item but I cant display it on mapping or such.

I only have to extract this items data and there are no other objects or such in the API. I want to eventually display the product with its image, and all its attributes but I am just trying to extract simple strings from the JSON like the product name.

The result of the above code when ran is simply the heading with no further content. Both console logs return the API data in full. See ComponentDidMount and render

import { render } from "@testing-library/react"
import React from "react"
import "./App.css"
import {useState, useEffect } from 'react'
import axios from 'axios'
import Colors from "./components/Colors"
import DetailsThumb from "./components/DetailsThumb"

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

  

  componentDidMount() {
    fetch("https://fe-assignment.vaimo.net/")
      .then((res) => res.json())
      .then(data => { console.log(data)
        this.setState({
          isLoaded: true,
          items: data,
        });
      });
  }

  render() {
    let content = null
    var { isLoaded, items } = this.state;
    if (!isLoaded) {
      return <div>Loading..</div>;
    } else {
      console.log(items)
      if (items.data){
        content = items.map((product, key) => <div>{product.name}</div>)
      }
      return (
        <div>
          <h1>The drone page</h1>
          {content}
          </div>
      );
    }
  }
}

export default App;

Upvotes: 2

Views: 3144

Answers (2)

Haseeb Ahmed
Haseeb Ahmed

Reputation: 1

The problem is that you are storing the result of map function (an array) in a new array.

if (items.data){
    content = items.map((product, key) => <div>{product.name}</div>)
  }

You should do this

if (items.data){
    content = items.product.name
  }

Upvotes: 0

TheTisiboth
TheTisiboth

Reputation: 1651

You are not getting a list of products, you are getting a single product, so instead of this:

if (items.data){
   content = items.map((product, key) => <div>{product.name}</div>)
}

You should do this:

if (items) {
  content = <div>{items.product.name}</div>
}

Upvotes: 1

Related Questions