Sou novo na área e saber como posso fazer para ter um consumo dinâmico de api rest em react. Atualmente a minha consulta está fixa e minha ideia seria pegar o valor que o usuario digitar para consulta, como posso passar essa informação via parametro?
import axios from 'axios';
const api = axios.create({
baseURL: 'https://localhost:44340/api'
});
export default api;
Meu componente
import React, { Component } from 'react';
import api from '../../../SolicitacaoApi';
import './style.css'
class SolicitacaoTable extends Component {
state = {
solicitacao: [],
}
async componentDidMount() {
const response = await api.get('solicitacao?protocolo='+1000250170);
this.setState({ solicitacao: response.data });
}
render() {
const { solicitacao } = this.state;
return (
<div>
<div className="main-table">
<table className="table-wrapper">
<thead>
<tr>
<th>Protocolo</th>
<th>Titular</th>
<th>Email</th>
<th>Data de inclusão</th>
<th>Telefone</th>
<th>Tipo de produto</th>
<th>Tipo de emissão</th>
<th className="column-status">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>{solicitacao.protocolo}</td>
<td>{solicitacao.titularNome}</td>
<td>{solicitacao.email}</td>
<td>{solicitacao.dtInclusao}</td>
<td>{solicitacao.telefone}</td>
<td>{solicitacao.tipoProduto}</td>
<td>{solicitacao.tipoEmissao}</td>
<td>
<div className={'status status-'+solicitacao.idStatusSolicitacao}>
{solicitacao.statusSolicitacao}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
);
};
};
export default SolicitacaoTable;
componentDidUpdate
para observar mudanças no estado ou nas props e realizar a requisição quando desejar, já que ocomponentDidMount
só será executado uma vez