Pude hacer la API y confirmé la respuesta en la consola. También he podido filtrar el elemento valioso necesario de la respuesta.
Mi problema actual en este momento es mapear los valores en un elemento html correspondiente. Por favor, vea mi código. Estoy trabajando con reaccionar y Next.js
También alguien puede ayudarme, digamos que quiero mapear respuestas múltiples usando este método props.entry?.map((enties, i) => () ¿Cuál es la mejor práctica para esto?
Muchas gracias, soy un gran novato en 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;Tiene la idea correcta de usar .map para representar una lista de elementos, pero también debe asegurarse de que, cuando haga esto, cada elemento devuelto en la función .map tenga un atributo clave que debe ser único dentro del nodo padre.
Si está llamando datos desde una API, esto generalmente estará dentro del objeto de entrada como _id, id o uuid, etc.
Más allá de esto, la forma en que represente esta lista depende de la estructura de datos de cada entrada en los datos de respuesta.
El siguiente es un ejemplo, si response.data fuera una matriz de entradas que tuvieran esta forma {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> )} }