El accesorio pasado tiene los mismos valores que el de la matriz de opciones. La razón por la que lo hago de esta manera es porque estoy usando un modal para editar una fila. Los datos se pasan de fila a modal. Modal tiene las opciones, pero quiero que los datos se completen previamente. Parece que no hay forma de que pueda completar el menú desplegable de reacción y selección. `options = [ { id: 0, value: 'New', label: 'New' },{*** }{ id: 1, valor: 'En curso', etiqueta: 'En curso' }, { id: 2, valor: 'Bloqueado', etiqueta: 'Bloqueado' }, { id: 3, valor: 'Completo', etiqueta: 'Completa' } ];
getSelectedStatus = (status) => {
this.options.map((selected) => {
if (selected.value === status) {
this.setState({
selectedOption: selected.id
});
}
});
console.log(this.state.selectedOption);
};`
Usé una función como esta para obtener la identificación de la opción seleccionada y luego, al menos de esa manera, pasar a la propiedad defaultValue dentro de render(), pero no funciona. ¿Alguna ayuda por favor?
Debe activar la opción seleccionada en cada evento onChange. Si lo usa como en el ejemplo que compartí a continuación, puede usar este componente llamando a todos sus campos y enviando los datos en opciones.
static defaultProps = {
options: [],
components: undefined,
};
handleChange = (selectedOption) => {
const { onChange } = this.props;
onChange(selectedOption.value);
};
render() {
const {
value, name, options, components} = this.props;
return (
<Select
name={name}
value={(value === '') ? null : options.find(obj => obj.value ===
value)}
onChange={this.handleChange}
options={options}
className="react-select"
classNamePrefix="react-select"
/>
);
}
return (
<>
<SelectField
{...input}
options={options}
components={components}
/>
);
};
renderSelectField.defaultProps = {
options: [],
components: undefined,
};
Puede enviar los datos en el campo que desea utilizar de la siguiente manera.
options={data && data.map((values) => { return ({value: values?.id, label: values?.label}); })}