Tengo un par de combobox que lleno con el state el objeto se ve así:
[
productos: [
{ id: "1", value: "Tennis", estado: false },
{ id: "2", value: "Camisa", estado: false },
{ id: "3", value: "Fajas", estado: false }
],
producto: { id: "", value: "", estado: false }
]
Donde el el valor de la opción sería el id y la descripción sería el value. Al seleccionar una opción, el objeto producto se actualiza con la opción seleccionada y habilita un checkbox que al darle click debería cambiar el estado del objeto producto y posteriormente buscar en el objeto productos el producto seleccionado y cambiar el estado ahi también. Tengo 3 combo con la misma estructura, por lo que quiero hacer una función generica para darle el valor al objeto producto u otro objeto con esta estructura y posteriormente otra para actualizar el estado. La primera función luce algo así:
handleDropdown(event) {
const objetoSeleccionado = event.target.value;
if (!(objetoSeleccionado === null || objetoSeleccionado === undefined)) {
const objeto = this.state.[event.target.name].find(
objeto => objeto.id === objetoSeleccionado
);
this.setState({
[event.target.name]: objeto
});
enableInputs();
}
}
Entonces en la línea que hace el this.state.[event.target.name].find
me arroja el error de unexpected token. Entonces, hay algúna manera de hacer esto o tengo que crear una función para cada combo?
Actualización: Según la respuesta de Emeeus, logré lo que deseaba. Lo que quería hacer era algo así:
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = {
productos: [
{ id: "1", value: "Tennis", estado: false },
{ id: "2", value: "Camisa", estado: false },
{ id: "3", value: "Fajas", estado: false }
],
producto: { id: "", value: "", estado: false }
};
this.handleDropdown = this.handleDropdown.bind(this);
this.handleDropDownState = this.handleDropDownState.bind(this);
}
handleDropdown(event) {
const objetoSeleccionado = event.target.value;
if (!(objetoSeleccionado === null || objetoSeleccionado === undefined)) {
const objeto = this.state[event.target.name].find(
objeto => objeto.id === objetoSeleccionado
);
//La key producto está hardcodeada por mi
this.setState(
{
producto: objeto
},
() => {
console.log(this.state); //<-- este callback es solo para mostrar state
}
);
}
}
handleDropDownState(event) {
if (!(event.target.name === null || event.target.name === undefined)) {
let producto = this.state.producto;
producto.estado = event.target.checked;
this.setState({ [event.target.name]: producto });
this.setState({
[this.state.productos.map(
productoFinal => productoFinal.id === producto.id
)]: [producto]
});
console.log(this.state);
}
}
render() {
return (
<div>
<select name="productos" onChange={e => this.handleDropdown(e)}>
{this.state.productos.map((p, i) => {
return (
<option key={i} value={p.id}>
{p.value}
</option>
);
})}
</select>
<br />
<label htmlFor="estadoProducto">
<input
type="checkbox"
id="producto"
name="producto"
value={this.state.producto.estado}
onChange={this.handleDropDownState}
/>
</label>
</div>
);
}
}
Gracias de antemano.