Estimados tengo un input type: checkbox el cual recorro y genero un array de datos y lo tengo en el state, al enviar el post se guarda en ua BD mongo, donde solo me inserta el primer array del checkbox, y no todos los checks seleccionados, he intentado de varias maneras pero no me inserta correctamente. creo que en el reducer tengo enviar esa matriz pero no lo consigo. dejare lo que tengo. si algune me puede dar una mano se lo agadecere mucho , si neseitan mas info la puedo pasar, tengo el server de prueba con express, mongodb, mongoose, el modelo de datos etc.
// JSX
import React, { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { preRegisterAddNew } from "../../redux/actions/PreRegister";
import { useForm } from "../../hooks/useForm";
export const FormPreRegistro = ({ handleValidated }) => {
const [isChecked, setisChecked] = useState([]);
useEffect(() => {
let isChecked = [
{ id: 1, value: "Rubro 1" },
{ id: 2, value: "Rubro 2" },
{ id: 3, value: "Rubro 3" },
{ id: 4, value: "Rubro 4" },
];
setisChecked(
isChecked.map(d => {
return {
select: false,
id: d.id,
value: d.value
};
})
);
},[])
const [formValues, handleInputChange] = useForm({
idFiscal: "",
pais: "",
empresa: "",
comprador: "",
comentario: "",
});
const dispatch = useDispatch();
const { idFiscal, pais, empresa, comprador, comentario } = formValues;
const [ rubro ] = isChecked;
const handleSubmit = (e) => {
e.preventDefault();
dispatch(preRegisterAddNew(
idFiscal,
pais,
rubro,
empresa,
comprador,
comentario
));
handleValidated();
};
return (
<form name="form" className="form-group" onSubmit={handleSubmit}>
<div className="row">
<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">
{isChecked.map((d) => (
<div key={d.id}>
<span>
<input
onChange={event => {
let checked = event.target.checked;
setisChecked(
isChecked.map(data => {
if (d.id === data.id) {
data.select = checked;
}
return data;
})
);
}}
type="checkbox"
checked={d.select}
name="rubro"
></input>
</span>
<span>{d.value}</span>
</div>
))}
</div>
</div>
</div>
<div className="d-grid gap-2">
<button type="submit" className="btn bg-button block subtitle">
Validar
</button>
</div>
</div>
</form>
);
};
// REDUCER
import { types } from "../types/types";
const dataInicial = {
idFiscal: null,
pais: null,
rubro: [],
empresa: null,
comprador: null,
comentario: null,
}
export const preRegistroReducer = (state = dataInicial , action) => {
switch (action.type) {
case types.preRegisterAddNewStart:
return {
...state,
...action.payload
}
default:
return state;
}
}
// ACTIONS
import { fetchWithoutToken } from "../helpers/fetch"
import { types } from "../types/types";
export const preRegisterAddNew = ( idFiscal, pais, rubro, empresa, comprador, comentario ) => {
return async (dispatch) => {
const resp = await fetchWithoutToken("preRegistro/new", { idFiscal, pais, rubro, empresa, comprador, comentario }, "POST");
const body = await resp.json();
console.log(body, 'el body');
if (body.ok) {
dispatch({
type: types.preRegisterAddNewStart,
payload: {
idFiscal,
pais,
rubro,
empresa,
comprador,
comentario
}
})
} else {
console.log(body.msg, 'error');
}
}
};