how to render data from an API in Reactjs?

Question

Sorry, guys, I’m very new to programming and I’m doing a project for a college. I managed to connect the api, I can bring the object from there, but I can’t render this data that is returned, I’ve tried a lot and it didn’t work. Can someone give me a light? Tomorrow I have to present it and do not know how to do. the code is so and lost in what to do ...

const Empresa = () => { const [itens, setItens] = useState([]) async function buscar(event) {

event.preventDefault();


const cpf = document.getElementById('cpf').value



try {

  if (cpf !== null) {
    if (cpf !== '') {
      const response = await api.post('/pacientes/atestados',
        {
          cpf
        });

        setItens(response.data);


      if (response.data !== null) {
        setItens(response);
        console.log(itens)

      }
      if (response.data == '') {
        console.log(response.data)

        alert('CPF não cadastrado')

      }


    }


    else {
      alert('Preencha todos os campos')
    }
  }
}


catch (error) {
  alert(error);

}
} return (

<>
  <Header />
  <h1>Bem vindo Empresa!</h1>
  <h2>Pesquisar Atestado</h2>

  <form >
    <div className="grupo de formulários">
      <label htmlFor="cpf"> CPF </ label>
      <input name="cpf" className="controle de formulário"
        id="cpf" placeholder="Digite o cpf do funcionário"
      />
    </ div>


    <button type="submit"
      className="form-contact-button" onClick={buscar}> Buscar atestado </ button>
  </ form>


  {/* <button id="form-contact-button2" onClick={sair}>SAIR</button> */}
</> 

Answer 1

Good afternoon Wendel!

I hope it’s not too late to present your work.

I’ll try to help you:

First, how you defined api in api.post? api is how you defined the library name you imported?

Secondly, you are making a POST request to /pacientes/atestados. Remember that you want to render a data from the bank. From what I understand by the context, you want to pass a Cpf and get the certificate of Cpf, if you have, right?

If that’s what you want, you need to make a GET request to the address, and it’s probably best to finish the address with a bar, I’ve had problems thanks to this (e.g.: /patients/certificates/).

After using the setItens with the whole list of attestations, you can do the following:

const resultado = itens.find( cpfPaciente => cpfPaciente === cpf ); /* in the above example, I considered that the certificate has the cpfPatient field, and will read all the items and look for the certificate whose cpfPatient is the same that was placed in the id="Cpf" input. When you find the Cpf certificate you searched for, it stores in result. */

To show the data, you can use the hook below: const [atestado, setAtestado] = useState({});

You can now set certificate as the search result setAtestado(resultado)

In the end, he puts {atestado} after the search button to render on the screen.

TIP: Do not use spaces and accents in classNames (and Ids as well). An element can have one or more classes, which are separated by space, then in className="grupo de formulário", are being considered three distinct classes, "group", "de" and "formulario". Change the spaces by hyphens (-) css works best.