Can you help me pass props from componet to

Guys i’m tryin to pass some data that i got from API to a functional component but, when I try to use to show I cannot get as you can see below

class RecebeDados extends React.Component {

    constructor() {

        super();

        this.state = {

            dadosRecebidos: [null],

            nome: null,

            isLoadig: true

        }

    }

    pegarUserName(value) {this.setState({ nome: value })}

    setarNome() {

       

        this.state.isLoadig = false;

        if(this.state.isLoadig == false){

            let carregar = () => {

             

                fetch(`https://api.github.com/users/${this.state.nome}`).then(resp => resp.json()).then(

                 (resultado) => {this.setState({dadosRecebidos: Object.entries(resultado)})

                   

                    let dadosDev = this.state.dadosRecebidos;

                    console.log(dadosDev)

                    const dev = new Dev(dadosDev[3][1], dadosDev[18][1], dadosDev[7][1], dadosDev[8][1], dadosDev[26][1], dadosDev[21][1])

                    return <TelaDev nome={dev.nome} seguidores={dev.seguidores} seguindo={dev.seguindo} repositorios={dev.repositorios} localizacao={dev.localizacao} />

                })}

                carregar();

            }

               

    }

    render() {

        return (

            <div>

                <div className="Pesquisa-User">

                    <input onChange={event => this.pegarUserName(event.target.value)} />

                    <button onClick={event => this.setarNome()} >Pesquisar</button>

                </div>

            </div>

        )

    }

}

export default RecebeDados;



import React, { useState,useEffect } from 'react';
function TelaDev(props) {


  return (
   <div className="telaDev">

        <h1>Teste</h1>
        <h1>{props.nome}</h1>
    </div>
  );
}

export default TelaDev;

I uploaded this video to youtube so you can know better what I’m talking about

We can’t mess around with this too much because we don’t have access to Dev.

I think what is happening is that RecebeDados is rerendering because you are changing its state here:

this.setState({ dadosRecebidos: Object.entries(resultado) });

That should trigger a rerender. But this will be with the old data because your render method is not referring to state directly. Those variables get changed but it may be after RecebeDados has already rerendered.

Why not pass this.state.dadosRecebidos into TelaDev and let TelaDev worry about creating the Dev object/class inside _TelaDev_if TelaDev is the only one that needs it - I like to push logic/data as far down the tree as it makes sense. If RecebeDados doesn’t need that object, then don’t let it worry about it.

1 Like