Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Como faz um componente no nextjs que o valor dele vem de um api

por Samuel Maximo De Araujo Neto
| 19.1k xp | 41 posts

Estou tentando fazer um componente de titulo e outro de desctricao (paragrafo) mas nao to conseguindo, e ainda estou com um erro: Esse eh oq vem da API Insira aqui a descrição dessa imagem para ajudar na acessibilidade

esse eh o codigo que estou tentando fazer em um componente, mas quer que seja em um componente para cada valor que vem da api (titulo, descricao) e eu possa renderizar quantos eu quiser e a ordem tbm

codigo do component:

"use client"
import { PersonalitiesProps } from "@/@types/personalities"
import { useEffect, useState } from "react"

const Personalities = () => {
  const [apiData, setApiData] = useState<PersonalitiesProps | null>(null)

  useEffect(() => {
    const feachData = async () => {
      try {
        const res = await fetch("http://localhost:8000/api/v1/personalidades", {
          method: "GET",
          headers: {
            "Content-Type": "application/json"
          }
        })
        const result = await res.json()
        console.log(result)
        setApiData({ data: result })
      } catch (error) {
        console.error(error)
      }
    }
    feachData()
  }, [])

  // TODO - CRIAR COMPONENT SEPARADO TANTO DE TITULO QUANTO DE TEXTO

  console.log(apiData)
  return (
    <section>
      {apiData && apiData.data && apiData.data.map(nomes => (
        <div key={nomes.nome}>
          <h1>
            {nomes.nome}
          </h1>
        </div>
      ))}
      {apiData && apiData.data && apiData.data.map(personalidades => (
        <div key={personalidades.id}>
          <h2>{personalidades.nome}</h2>
          <p>{personalidades.historia}</p>
        </div>
      ))}
    </section>
  )
}

export default Personalities

como estou chamando na pagina:

import Personalities from "@/components/Personalities";

export default function TestePage() {

  return (
    <section>
      <Personalities />
    </section>
  )
}

Informacoes: Nextjs = 14.x Typescript = sim Api= golang, local, NextJs= APP/ROUTER

Estou aceitando dicas e sugestoes. Agradeço a atencao!!

1 resposta
solução!
por Estudante
| 568.5k xp | 1338 posts

Oi!

Pra criar os componentes separados, é só fazer dois novos, um pro título e outro pra descrição. 

// components/Title.tsx
import React from 'react';

interface TitleProps {
  text: string;
}

const Title: React.FC<TitleProps> = ({ text }) => {
  return <h1>{text}</h1>;
};

export default Title;

// components/Description.tsx
import React from 'react';

interface DescriptionProps {
  text: string;
}

const Description: React.FC<DescriptionProps> = ({ text }) => {
  return <p>{text}</p>;
};

export default Description;

Agora, no teu componente Personalities, é só importar esses novos e usar assim:

// components/Personalities.tsx
import React, { useEffect, useState } from 'react';
import Title from './Title';
import Description from './Description';
import { PersonalitiesProps } from "@/@types/personalities";

const Personalities = () => {
  const [apiData, setApiData] = useState<PersonalitiesProps | null>(null);

  // ... teu código de fetch aqui ...

  return (
    <section>
      {apiData && apiData.data && apiData.data.map(personalidade => (
        <div key={personalidade.id}>
          <Title text={personalidade.nome} />
          <Description text={personalidade.historia} />
        </div>
      ))}
    </section>
  );
};

export default Personalities;

Usei personalidade.id pra chave (key) de cada div. Isso deve dar um jeito no problema das chaves duplicadas que tá te pegando. É importante que cada elemento no map tenha uma chave única pro React se virar direitinho.

Confirma que cada id de personalidade é único. Se ainda tiver dando erro, dá uma conferida nos dados que tão vindo da API pra garantir que não tem id repetido.

Valeu!