Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Possivel solucao

Pensando em pegar os dados da tabela inicial, tentei bolar algo, pegando os dados e usando no autores, como foi feito com a tabela, mas nao deu muito certo.

import React ,{ Fragment, Component } from 'react';
import Header from './Header';

let TableBody=props=>{
    let lines= props.auto.map((line,index)=>{
        return(
            <tr key={index}>
                <td >{line.name}</td>
            </tr>
        )
    });


    return <tbody>{lines}</tbody>
}
class Authors extends Component{
    constructor(props){
        super(props);
        this.state='';
    }
    render(){
       let autho=this.props;
        return(

            <Fragment>
                <Header/>
                    <h1>Authors</h1>
                    <table>
                        <TableBody auto={autho}/>
                    </table>
            </Fragment>
        );
    }

}
export default Authors;

e da esse erro

TypeError: props.auto.map is not a function

Teria que usar o props.children para passar os valores entre as telas/componentes?

3 respostas
solução

Oi Thales, tudo bem?

Dei uma olhada no seu código e ele tem alguns problemas.

Primeiro é necessário que você inicialize seu state no constructor, para isso, o correto seria:

this.state = {
nomes: [] //nome dos autores
}

Você pode deixar os nomes direto no array ou recuperá-los através de uma requisição ( nesse segundo caso, o ideal é utilizar o componentDidMount e o setState).

Com isso feito, basta corrigir algumas props:

<TableBody auto={this.state.nomes} />

e dentro do seu map, o correto seria

line.nome

A sua solução corrigida utilizando a ApiService que será construída, caso prefira a maneira hardcoded é só pedir!

import React ,{ Fragment, Component } from 'react';
import Header from './Header';
import ApiService from './ApiService';
import PopUp from './PopUp';

let TableBody=props=>{
    console.log(props.auto)
    let lines= props.auto.map((line,index)=>{
        return(
            <tr key={index}>
                <td >{line.nome}</td>
            </tr>
        )
    });


    return <tbody>{lines}</tbody>
}
class Authors extends Component{
    constructor(props){
        super(props);
        this.state={
            nomes : []
        }

    }
        componentDidMount(){
        ApiService.ListaNomes()
                .then(res => {
                    this.setState({nomes: [...this.state.nomes, ...res.data]});
                        PopUp.exibeMensagem('success', 'Autores Listados com sucesso');
                });
    }
    render(){
        return(

            <Fragment>
                <Header/>
                    <h1>Authors</h1>
                    <table>
                        <TableBody auto={this.state.nomes}/>
                    </table>
            </Fragment>
        );
    }

}
export default Authors;

Espero que esteja gostando!

Abraços e sucesso, meu amigo.

maravilha Paulo, muito obrigado pela ajuda. Estou gostando bastante do que você está passando e do framework em si, é meio complicado de inicio entender a passagem de props entre componentes. "Brigadão" pela ajuda!!!!

Opa!

Nesse primeiro momento pode ser um pouco complicado mesmo, mas é só ir com calma que tudo faz sentido!

Vou fechar o tópico agora, qualquer nova dúvida só criar um novo que estarei aqui para te ajudar, a colaboração facilita a vida.

Abraços e sucesso!