-1
I have a form that receives parameters with which I perform a get on the server, bringing and rendering the information to the user.
Currently this get is done by calling a function on onClick of a button (as in the code below, calls the Function searches through the onClick={Search} ). As I already have the initial parameters for search, I would like that once the form was "loaded" already trigger the event and present the information on screen, a kind of event "onShow()", but there is nothing similar, as we have the onClick().
How could I do that with Act? All help is welcome!
Following is sample code:
import React, { FormEvent, useState } from 'react';
import { useLocation } from "react-router-dom";
import api from '../../services/api';
import AtendimentoItem, { Atendimento } from '../../componentes/AtendimentoItem';
...
const ListaAtendimentos: React.FC = () => {
const { state } = useLocation<Organizacao>();
const [atendimentos, setAtendimentos] = useState([]);
async function buscaAtendimentos(e: FormEvent) {
const response = await api.get('atendimentos' , {
params: {
organizacao_atd: state.id_org
}
});
setAtendimentos(response.data);
}
return (
<div>
<form id="busca-atendimentos" >
<button type="button" onClick={buscaAtendimentos}>Pesquisar</button>
<main>
{atendimentos.map((atendimento: Atendimento) => {
return <AtendimentoItem key={atendimento.id_atd} atendimento={atendimento} />;
})}
</main>
</form>
</div>
);
}
export default ListaAtendimentos;
useEffect is fired as soon as the screen renders, you can do it right now..
– Jonathan CR
Perfect, it was exactly what I needed. In my first steps with React! Thanks for the tip!
– Marcs