0

Estoy consumiendo una api y el json que me devuelve quiero enviárselo a otro componente para ahí mostrarlo, pero no se como hacerlo, estoy usando hooks, he visto que hay ejemplos pero con clases :C. Gracias de antemano.

import React, { useState,useEffect } from 'react';
import User from '../user/index.js';

const UserList = () => {
   const  [planets,setPlanets ]= useState([]);
 
    async function fetchData(){
        const res = await fetch("https://swapi.co/api/planets/");
        res.json()
        .then(res => setPlanets(res.results))
        .catch(err => console.log(err));
    }
    useEffect(()=>{
        fetchData();
    });

    const variable = "Hola variable";
    return(
        <div>
            <User />
        </div>
    )
}

export default UserList;

import React from 'react';

const User = () =>{
    return(
        <div></div>
    )
}

export default User;

1
  • Buenas, puedes indicar que datos quieres pasar. Entiendo que quieres pasar datos a User, pero sería mejor que lo aclares
    – lDanny7
    Commented el 4 feb. 2020 a las 8:14

1 respuesta 1

0

Para enviar data a componentes tienes que usar los props

import React, { useState,useEffect } from 'react';
import User from '../user/index.js';

const UserList = () => {
   const  [planets,setPlanets ]= useState([]);
 
async function fetchData(){
    const res = await fetch("https://swapi.co/api/planets/");
    res.json()
    .then(res => setPlanets(res.results))
    .catch(err => console.log(err));
}
useEffect(()=>{
    fetchData();
});

const variable = "Hola variable";
return(
    <div>
        <User variable={variable} planets={planets} />
    </div>
)
}

export default UserList;

Luego desde tu componente puedes leer estos props:

import React from 'react';

const User = (props) =>{
return(
  <div>
    <div>Planets: {props.planets}</div>
    <div>Variable: {props.variable}</div>
  </div>
)
}

export default User;

1
  • Ya lo habia resuelto pero muchas gracias igual Commented el 5 feb. 2020 a las 5:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.