Setting an array of checkboxes to the frontity.state.theme

🙋Get Help
1

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!

3

Hi @meaghan1,

Frontity’s state is the place where you can store info of your project so it can be accessed from any of your React components and Frontity’s actions are the methods that you can define to modify the values of this state

In the scenario you explain it doesn’t seem you’re using the action you have defined to modify the all the data fro the checkboxes is not stored in the state

Can you provide a repo or code-sandbox with your code ? This is especially helpful to find solutions of technical issues with specific code