Props no Class Component

Fala mbthales!

Baseado nesse código que você me enviou, você está tentando acessar um autores que não foi criado por você.

Lembre-se que para acessar props precisamos fazer:

this.props.autores

Caso você tenha suprimido alguma parte do seu código, cole-o inteiro aqui!

Abraços!

Eu fiz o código exatamente como mostrado na aula:

class Tbody extends React.Component{

  render(){

    const linhas = autores.map((linha, index) => {
      return(
        <tr key = {index}>
          <td>{linha.nome}</td>
          <td>{linha.livro}</td>
          <td>{linha.preco}</td>
          <td><button>Remover</button></td>
        </tr>
      )
    })

    return(
      <tbody>
        {linhas}
      </tbody>
    )
  }
}

//ESSA CLASE CRIA A TABELA
class Tabela extends React.Component{

  render(){

    const {autores} = this.props

    return(
      <table>
        <Thead />
        <Tbody />
      </table>
    )
  }
}

//ESSA CLASSE RENDERIZA NO HTML
class App extends React.Component{

    autores =  [
    {
      nome: 'Paulo',
      livro: 'React',
      preco: '1000'
    },
    {
      nome: 'Daniel',
      livro: 'Java',
      preco: '99'
    },
    {
      nome: 'Marcos',
      livro: 'Design',
      preco: '150'
    },
    {
      nome: 'Bruno',
      livro: 'DevOps',
      preco: '100'
    }
  ]

  render(){
    return(
      <div>
        <Tabela autores = {this.autores} />
      </div>
    )
  }
}

Eu só alterei, como disse anteriormente, o tbody que era uma function component por uma class component. Assim, eu tentei colocar uma lógica tirando o props de props.autores.map, pois não é passado tal argumento.

Fala mbthales!

Levando em conta que sua classs App está em um arquivo diferente, é necessário realizar a exportação da Tabela!

export default Tabela;

Além disso, repare que sua tabela captura os autores corretamente das propriedades, porém em nenhum momento você repassa esses dados para o seu Tbody

<Tbody autores={autores} />

Agora que você está passando os dados, no seu Tbody, basta você adicionar

this.props.autores.map....

ou capturar autores como feito na Tabela:

const { autores } = this.props;

Feito isso, tudo deve funcionar!

Espero que tenha ficado claro. É extremamente importante praticar da maneira que você está fazendo, continue assim, meu amigo.

Abraços e sucesso, sempre que precisar, estarei aqui.

Funcionou perfeitamente. Muito obrigado novamente pela atenção e ajuda!

Sem problemas!

Estou fechando sem tópico, precisando é só chamar!

Abraços e sucesso!