Lo siento si mi pregunta es demasiado ridícula, porque soy nuevo en la programación.
Creé un proyecto con React, tengo 3 componentes diferentes: barra de navegación, barra lateral y datos.
Recibí datos json de una API usando ganchos en mi componente de datos.
import { useEffect, useState } from "react"; export const Data = () => { const [data, setData] = useState(); useEffect(() => { fetch("https://jsonplaceholder.typicode.com/todos/1") .then((response) => response.json()) .then((json) => setData(json)); }, []); };Ahora, ¿cómo puedo acceder al estado de "datos" en el componente de datos desde otros componentes?
No quiero usar Context api, porque escuché que solo se usa en los casos en que el estado afecta a todos los componentes, como la autenticación.
Gracias de antemano por tu ayuda
He agregado algunas líneas en su codesandbox. Creo que esto es lo mismo que quieres lograr.
Gracias a todos los que me ayudaron. En realidad, me di cuenta de que el título no es correcto. Lo que quería hacer era usar los datos traídos fuera del componente dentro del componente. Hice esto creando ganchos personalizados. Si alguien tiene curiosidad, dejo el código a continuación.
import { useEffect, useState } from "react"; export default function useData(id = 1) { const [data, setData] = useState([]); useEffect(() => { fetch(`https://jsonplaceholder.typicode.com/todos/${id}`) .then((response) => response.json()) .then((json) => setData(json)); }, []); return { data }; } Luego importo y uso el enlace useData que creé en cualquier componente. (Ni siquiera estoy seguro de que se llame gancho). Ejemplo: const {data} = useData(4)
Tal vez podría usar la función module.exports en el componente de datos y luego simplemente llamarlo en los componentes necesarios. Por ejemplo:
import { useEffect, useState } from "react"; export const Data = () => { const [data, setData] = useState(); useEffect(() => { fetch("https://jsonplaceholder.typicode.com/todos/1") .then((response) => response.json()) .then((json) => setData(json)); }, []); }; module.exports = data;Luego, en el componente de la barra de navegación, por ejemplo, lo llama y lo usa donde sea necesario:
const Navbar = () => { const data = require(../Data) ... ... ... }Espero eso ayude.