Correctly Map API response in react.js

Question

i have been able to make the api and and confirmed the response on console. I have also been able to filter out the valuable element needed from the response.

1. My current issue right now is to map the values into a corresponding html element. Please see my code. I am working with react and Next.js

2. Also can someone help me, say i want to map multiple response using this method props.entry?.map((enties, i) => () What is the best practise for this.

Thanks very much, i am a big newbie to javascript.

import React, { Component } from "react"
import { Octokit } from "@octokit/core"

const token = "***********************4571B*";
const id = "***********************e911c*";
// Octokit.js
// https://github.com/octokit/core.js#readme

class Dairy extends Component{
    constructor(props){
        super(props);
        this.state = {
          entry: [],
        }
      }
      async componentDidMount()  {
      const octokit = new Octokit({
        auth: token
      })
      
       const response = await octokit.request('GET /gists/{gist_id}', {
        headers: {
            accept: 'application/vnd.github.v3+json',
          },
        gist_id: id,
        
      })
      console.log(response);
      //Below are the values i need from the response
      console.log(response.data.description);
      console.log(response.data.files.ahmed.content);
      console.log(response.data.created_at);

      this.setState({entry: [response.data]})

    }
  render(){
          //here's where i want to map the values.
    return(
       <div>
         
           <div class="rounded-lg border border-stone-800 text-stone-100 bg-opacity-20 bg-stone-800 p-8">
               <h3 class="font-am text-2xl mb-5">{entry.data.description}</h3><div class="space-y-10"><a href="https://www.goodreads.com/book/show/13589182-mastery" target="_blank" rel="noopener noreferrer" class="content-card block hover:cursor-pointer text-stone-300 hover:text-stone-400 group">
               <div class="flex justify-between items-center"><div class="text-lg font-medium mb-1 text-stone-100 group-hover:text-stone-400 transition-colors duration-300">{entry.data.files.ahmed.content}</div>
               <div class="font-fanwood italic text-lg text-stone-400 group-hover:text-stone-500 transition-colors duration-300">{entry.data.created_at}</div></div>
               <div class="text-sm text-stone-400 group-hover:text-stone-500 transition-colors duration-300">written by Robert Greene</div></a></div></div> 
       </div>
    )}
}

export default Dairy;

Answer 1

You have the right idea of using .map to render a list of items, but you also need to make sure, that when you do this, that each returned item in the .map function, has a key attribute that must be unique inside the parent node.

If you're calling data from an api, this will usually be inside the entry object as _id, id, or uuid, etc.

Beyond this, how you render this list depends on the data structure of each entry in response data.

The following is an example, if response.data was an array of entries that took this form {id: uuid, text: string}

   render(){
          //here's where i want to map the values.
    return(
       <div>
         {this.props.state?.map((entry, idx)=>{
            return <div key={entry.id}>{entry.text}</div>
         })}
       </div>
    )}
}