Estimados he creado un formulario donde tengo unas opciones de checkbox, donde obtengo los valores en el estado pero al enviar solo me guarda el valor de primer elemento o checkbox por mas que esten marcados 3 solo guarda el valor del primero, voy a dejar el codigo y captura del problema solo nesecito resolver la seleccion de los checkbox de los valores que se seleccionan, en este caso solo guarda el valor del pirmer check,
import React, { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { preRegisterAddNew } from "../../redux/actions/PreRegister";
import { useForm } from "../../hooks/useForm";
const rubrosData = [
{ name: "Rubro 1" },
{ name: "Rubro 2" },
{ name: "Rubro 3" },
{ name: "Rubro 4" },
{ name: "Rubro 5" },
];
let paises = [
{ value: "", label: "[Seleccione Pais]" },
{ value: "1", label: "Perú" },
{ value: "2", label: "Chile" },
{ value: "3", label: "Argentina" },
{ value: "4", label: "Brasil" },
{ value: "5", label: "México" },
];
let empresas = [
{ value: "", label: "[Seleccione Empresa]" },
{ value: "1", label: "Empresa 1" },
{ value: "2", label: "Empresa 2" },
{ value: "3", label: "Empresa 3" },
{ value: "4", label: "Empresa 4" },
{ value: "5", label: "Empresa 5" },
];
let compradores = [
{ value: "", label: "[Seleccione Comprador]" },
{ value: "1", label: "Comprador 1" },
{ value: "2", label: "Comprador 2" },
{ value: "3", label: "Comprador 3" },
{ value: "4", label: "Comprador 4" },
{ value: "5", label: "Comprador 5" },
];
export const FormPreRegistro = ({ handleValidated }) => {
const [disabled, setDisabled] = useState(false);
const [chkRubros, setchkRubros] = useState([]);
const [formValues, handleInputChange] = useForm({
idFiscal: "",
pais: "",
empresa: "",
comprador: "",
comentario: "",
});
const dispatch = useDispatch();
const [ rubro ] = chkRubros;
const { idFiscal, pais, empresa, comprador, comentario } = formValues;
const handleSubmit = (e) => {
e.preventDefault();
dispatch(
preRegisterAddNew(idFiscal, pais, empresa, comprador, comentario, rubro )
);
handleValidated();
};
useEffect(() => {
setchkRubros(rubrosData);
}, []);
const handleChange = (e) => {
const { name, checked } = e.target;
let tempRubro = chkRubros.map((rubro) =>
rubro.name === name ? { ...rubro, isChecked: checked } : rubro
);
setchkRubros(tempRubro);
};
return (
<form name="form" className="form-group" onSubmit={handleSubmit}>
<div className="row">
<div className="form-group col-12 mb-3">
<label htmlFor="idFiscal">N° Id. Fiscal</label>
<input
className="form-control"
type="text"
name="idFiscal"
autoComplete="off"
value={idFiscal}
onChange={handleInputChange}
/>
</div>
<div className="form-group col-12 mb-3">
<label htmlFor="pais">País</label>
<select
className="form-select"
name="pais"
value={pais}
onChange={handleInputChange}
>
{paises.map((item) => {
return (
<option name="pais" key={item.value} value={item.label}>
{item.label}
</option>
);
})}
</select>
</div>
<div className="form-group col-md-12 col-12 mb-3">
<label htmlFor="rubro">Seleccione Rubro</label>
<div className="multiselect">
<div className="selectBox"></div>
<div className="checkboxes overflow-auto">
{chkRubros.map((rubro, index) => (
<div className="form-check" key={index}>
<input
type="checkbox"
className="form-check-input"
name={rubro.name}
checked={rubro?.isChecked || false}
onChange={handleChange}
/>
<label className="form-check-label ms-2">{rubro.name}</label>
</div>
))}
</div>
</div>
</div>
<div className="form-group col-12 mb-3">
<label htmlFor="empresa">Empresa a postular</label>
<select
className="form-select"
name="empresa"
value={empresa}
onChange={handleInputChange}
>
{empresas.map((item) => {
return (
<option name="empresa" key={item.value} value={item.label}>
{item.label}
</option>
);
})}
</select>
</div>
<div className="form-group col-12 mb-3">
<label htmlFor="comprador">Comprador responsable</label>
<select
className="form-select"
name="comprador"
value={comprador}
onChange={handleInputChange}
>
{compradores.map((item) => {
return (
<option name="comprador" key={item.value} value={item.label}>
{item.label}
</option>
);
})}
</select>
</div>
<div className="form-group col-12 mb-3">
<label htmlFor="comentario">Contacto</label>
<textarea
className="form-control"
name="comentario"
disabled={disabled}
value={comentario}
onChange={handleInputChange}
></textarea>
</div>
<div className="d-grid gap-2">
<button type="submit" className="btn bg-button block subtitle">
Validar
</button>
</div>
</div>
</form>
);
};
// Utilizo un Schema asi:
const preRegistroSchema = Schema({
idFiscal: {
type: String,
required: true
},
pais: {
type: String,
required: true
},
rubro : [{
name : String,
isChecked : Boolean
}],
empresa: {
type: String,
required: true
},
comprador: {
type: String
},
comentario: {
type: String
},
});