This is probably something simple, but I just can't see what I am doing wrong.
The option is not changing when I choose a different one, but the state is being updated.
I have three components, a based on class (OrcConfig) and two function components (salvarOrcamento and orcSelect). The first one owns my logic and controls the states, the second one fetchs some data from DB and sends it to third one, where the select tag is and the list of options is being created by two map methods, the first one creates the number of selects and the second one prints the list of options inside their respective select.
So far so good, the problem is that the DOM is not being updated when I change the option, however the state is, in fact it only happens when the state is being updated, if I remove this.setState the problem vanishs, of course this is not a solution, since I need to update the state. Besides that I just can't see the relation between the state and the select, since the component is not even receiving its value, it has access just to the method.
What is missing here (or left)?
Here goes a simplified version of my app:
OrcConfig component:
class OrcConfig extends Component {
state = {
cliente: null
}
selecionarClienteHandler = e => {
let clienteNome = this.state.cliente;
clienteNome = e.currentTarget.value.split(',').filter(it => it !== '').join();
this.setState({cliente: clienteNome});
console.log(clienteNome)
}
render () {
return (
<div>
<SalvarOrcamento
selecionarCliente={this.selecionarClienteHandler}
/>
</div>
);
}
}
SalvarOrcamento component:
const salvarOrcamento = props => {
let [clientes, setClientes] = React.useState(null)
React.useEffect(() => {
axios.get('/clientes.json')
.then(res => {
let clientesListaArr = Object.keys(res.data)
.map(it => [['nome', it]])
clientesListaArr.unshift([['nome', 'Clientes']])
let clientesLista = clientesListaArr.map(it => Object.fromEntries(it))
setClientes(clientes = clientesLista)
})
.catch(erro => console.log(erro))
}, [])
return (
<div>
<OrcSelect tipos={[clientes]} valorTipo={props.selecionarCliente} />
</div>
)
}
OrcSelect component:
const orcSelect = props => {
console.log(props.tipos)
return (
props.tipos.map( (tipo, i) => {
return <select
key={Math.random()}
onChange={props.valorTipo}
name={tipo[0].nome}>
{
tipo.map((item, index) =>
<option
value={[item.valor, item.altura, item.nome, item.furo]}
key={Math.random()} >{item.nome}
</option>
)
}
</select>
})
)
};
This is an example of what OrcSelect is receving to map:
[[
{nome: 'João'},
{nome: 'Ricardo'},
{nome: 'Alessandra'},
{nome: 'Ana'}
]]
