essa é a questão que estou fazendo e esse é meu código
import React, { useEffect, useContext, useState } from 'react';
import tableContext from '../context/tableContext';
const INITIAL_COLUMN_OPTIONS = [
'population', 'orbital_period', 'diameter', 'rotation_period', 'surface_water'];
function Filters() {
const { inputName,
setInputName,
columnFilter,
setColumnFilter,
comparisonFilter,
setComparisonFilter,
inputNumber,
setInputNumber,
filterByNumericValues,
setFilterByNumericValues } = useContext(tableContext);
const [arrayOptions, setArrayOptions] = useState(INITIAL_COLUMN_OPTIONS);
const clickSubmitButton = (() => {
setFilterByNumericValues(
[...filterByNumericValues,
{ inputName, columnFilter, comparisonFilter, inputNumber }],
);
setArrayOptions([...arrayOptions.filter((selected) => selected !== columnFilter)]); // aqui remove
});
useEffect(() => {
setColumnFilter(arrayOptions[0]);
}, [arrayOptions]);
return (
<div>
{ /* criando os filtros a partir daqui */ }
<h3>Filtros</h3>
<input
data-testid="name-filter"
name="filtra nomes"
type="text"
value={ inputName }
onChange={ (e) => setInputName(e.target.value) }
/>
<p />
<fieldset>
<legend>Filtros de Conteúdo</legend>
<label htmlFor="column-filter">
{' '}
Coluna
{' '}
<select
data-testid="column-filter"
name="coluna de filtros"
value={ columnFilter }
onChange={ (e) => setColumnFilter(e.target.value) }
>
{arrayOptions.map((op, index) => (
<option key={ index } value={ op }>{ op }</option>)) }
</select>
</label>
<label htmlFor="comparison-filter">
{' '}
Operador
{' '}
<select
data-testid="comparison-filter"
name="comparison-filter"
value={ comparisonFilter }
onChange={ (e) => setComparisonFilter(e.target.value) }
>
<option value="maior que">maior que</option>
<option value="menor que">menor que</option>
<option value="igual a">igual a</option>
</select>
<input
data-testid="value-filter"
name="filtro de valores"
type="number"
value={ inputNumber }
onChange={ (e) => setInputNumber(e.target.value) }
/>
</label>
<button
data-testid="button-filter"
name="botao filtrar"
type="submit"
onClick={ clickSubmitButton }
>
Filtrar
</button>
<button
data-testid="filter"
name="formatar"
type="subit"
onChange={}
>
Formatar Filtro
</button>
</fieldset>
</div>
);
}
export default Filters;