javascript - Trouble making ReactJS component

Question

The code is working fine, but my main component is too overwhelmed with the function "renderCadastros".

How can i make the function "renderCadastros" a child component and use it where i have "{Cadastros.map(renderCadastros)}" and keep the code running the same?

I'll still have to call the function "removerCadastro" from this parent component when the "renderCadastros" component is created.

Parent component:

import './App.css';
import React, {useState} from 'react';
import {Table, Jumbotron, Button, Badge} from 'react-bootstrap'
import Formulario from './Formulario'

function App() {
  
  const [Cadastros, setCadastros] = useState([{
    "id": 1,
    "nome": "Francisca Julia da Costa",
    "cpf": "457.696.936-65",
    "rg": "47.360.897-2",
    "data_nasc": "23/03/1944",
    "sexo": "Feminino"
  },
  {
    "id": 2,
    "nome": "Noah Felipe Silva",
    "cpf": "956.531.431-70",
    "rg": "40.974.782-8",
    "data_nasc": "11/07/1964",
    "sexo": "Masculino"
  },
  {
    "id": 3,
    "nome": "Alícia Rosangela Melo",
    "cpf": "066.291.353-18",
    "rg": "36.214.141-1",
    "data_nasc": "18/02/1978",
    "sexo": "Feminino"
  }]) 
  
  function atualizarCadastros(novoCadastro){
    setCadastros(cadastrosAtuais => {
      return [...cadastrosAtuais, novoCadastro]
    })
  }

  function idExiste(novaId){
    return Cadastros.some(cadastro=> cadastro.id == novaId)
  }

  function removerCadastro(index){
    setCadastros(Cadastros.filter(cadastro => cadastro.id != index))
  }

  function renderCadastros(cadastro, index){
    return(
    <tr id={cadastro.id} key={index}>
        <td>{cadastro.id}</td>
        <td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.nome}</td>
        <td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.cpf}</td>
        <td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.rg}</td>
        <td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.data_nasc}</td>
        <td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.sexo}</td>
        <td align="center"><Button  onClick={()=>removerCadastro(cadastro.id)} variant="danger">Excluir</Button></td>
    </tr>)
    }

  return (
  <Jumbotron style={{background: 'transparent'}}> 
    <Formulario idExiste={idExiste} atualizarCadastros={atualizarCadastros} />
    
    <h4>
    Quantidade de registros: <Badge variant="info">{Cadastros.length}</Badge>
    </h4>
    
    <Table striped bordered hover size='sm'>
      <thead>
        <tr>
          <th>Id</th>
          <th>Nome</th>
          <th>CPF</th>
          <th>RG</th>
          <th>Nascimento</th>
          <th>Sexo</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
      {Cadastros.map(renderCadastros)}
      </tbody>
    </Table>
  </Jumbotron>
  
  );
}

export default App;

Answer 1

You can easily create a react component and pass props into it. For example in this case, you can create a new component like.

function Cadastros({ cadastro }) {
    return (
        <div>
            return(
            <tr id={cadastro.id}>
                <td>{cadastro.id}</td>
                <td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.nome}</td>
                <td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.cpf}</td>
                <td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.rg}</td>
                <td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.data_nasc}</td>
                <td contentEditable="true" suppressContentEditableWarning={true}>{cadastro.sexo}</td>
                <td align="center"><Button onClick={() => removerCadastro(cadastro.id)} variant="danger">Excluir</Button></td>
            </tr>)
        </div>
    )
}

And then replace

  <tbody>
      {Cadastros.map(renderCadastros)}
      </tbody>

with

<tbody>
{
  Cadastros.map((c,i) => <Cadastro cadastro={c} key={i} />) }
</tbody>