I am having a bit of trouble trying to figure out how to set an array of checkbox values to the state. I’ve been able to figure out how to set the value of a radio buttons to the state just fine but not the checkboxes. the code for this component is:
import React, { useState, useEffect } from "react";
import { connect } from "frontity";
import { GridWrap, GridRow, GridColumn } from "emotion-flex-grid";
import QuizCheckbox from "@theme/src/components/quiz-checkbox";
import QuestionCommonContainer from "../question-common.style";
const Question3 = ({ state, actions }) => {
const { quizSleepPosition } = state.theme.quiz;
const [checkedItems, setCheckedItems] = useState([checkedItems]);
const checkboxes = [
{
key: "checkBox1",
label: "Back",
},
{
key: "checkBox2",
label: "Side",
},
{
key: "checkBox3",
label: "Stomach",
},
];
const handleClick = (e) => {
setCheckedItems({
...checkedItems,
[e.target.name]: e.target.checked,
});
};
console.log(checkedItems);
return (
<QuestionCommonContainer>
<GridWrap>
<GridColumn px={["l"]}>
<GridRow wrap="wrap" justify="center">
<GridColumn width={[12, 12, 12, 4]}>
{checkboxes.map((item, id) => (
<GridColumn pb={"l"} key={id}>
<QuizCheckbox
name={item.label}
label={<h5>{item.label}</h5>}
selected={checkedItems[item.label]}
onClick={handleClick}
/>
</GridColumn>
))}
</GridColumn>
</GridRow>
</GridColumn>
</GridWrap>
</QuestionCommonContainer>
);
};
export default connect(Question3);
Right now frontity.state.theme is set up as:
state: {
theme: {
isMobileMenuOpen: false,
featured: {
showOnList: false,
showOnPost: false,
},
quiz: {
quizGender: -1,
quizSleepPosition: {
back: null,
side: null,
stomach: null,
},
},
},
},
I also have an action that is set up as:
export const setQuizSleepPosition = ({ state }) => (checkedItems) => {
state.theme.quiz.quizSleepPosition = checkedItems;
};
I am trying to figure out how to update state.theme.quiz.quizSleepPosition
to reflect the items that have been selected from the checkboxes. Any help would be great!