React Checkbox Hook Array

Question

I have the following data:

const data = [
  {
    categoryId: 20
  },
  {
    categoryId: 21
  },
  {
    categoryId: 28
  },
  {
    categoryId: 16
  },
  {
    categoryId: 10
  }
];

And this is my code below:

const Demo01 = () => {
  const [categoryId, setCategoryId] = useState([]);

  const handleCategory = (e, value) => {
    if (e.target.checked) {
      setCategoryId([...categoryId, e.target.value]);
    } else {
      setCategoryId(categoryId.filter((id) => id !== e.target.value));
    }
  };

  return (
      <FormControl component="fieldset">
        <FormLabel component="legend">categoryId: {categoryId}</FormLabel>

        <FormGroup row>
          {data.map((xxx) => (
            <FormControlLabel
              control={
                <Checkbox
                  color="primary"
                  value={xxx.categoryId}
                  onChange={handleCategory}
                />
              }
              label={xxx.categoryId}
              labelPlacement="end"
            />
          ))}
        </FormGroup>
      </FormControl>
  );
};

I want to use checkboxes to add or remove categoryId data within an array. However, the results I'm getting when checking all these boxes are:

2021281610

I want my categoryId array to be separated with commas as follow:

20,21,28,16,10

How can I resolve this issue above? You can also checkout my CODESANDBOX HERE for more details

Note: I've already tried other methods here but it didn't work for me.

EDIT: I want my categoryId array to be a string of (comma separated) array values. I've tried .toString() & .join() method but it didn't work.

JamesLai · Accepted Answer · 2020-11-27 01:22:31Z

2

I've managed to solve this issue through the following method:

Created another useState hook for the filteredCategoryId to accept a string.
Utilized the useEffect Hook to convert categoryId array into a string of comma separated values

const [categoryId, setCategoryId] = useState([]);
const [filteredCategoryId, setFilteredCategoryId] = useState("");

const handleCategory = (e, value) => {
  if (e.target.checked) {
    setCategoryId([...categoryId, e.target.value]);
  } else {
    setCategoryId(categoryId.filter((id) => id !== e.target.value));
  }
};

useEffect(() => {
  if (categoryId.length === 0) {
    setFilteredCategoryId("");
  } else {
    setFilteredCategoryId(categoryId.join(","));
  }
}, [categoryId]);

I can only use the .toString() or .join() method after using the hook above. CODESANDBOX here

answered Nov 27, 2020 at 1:22

JamesLai

1912 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rohit Khanna · Accepted Answer · 2020-11-26 13:33:21Z

0

Replacing <FormLabel component="legend">categoryId: {categoryId} with <FormLabel component="legend">categoryId: {categoryId.join()} help?

answered Nov 26, 2020 at 13:33

Rohit Khanna

7485 silver badges15 bronze badges

1 Comment

JamesLai Over a year ago

Sorry my question wasn't very clear. {categoryId.join()} did help to turn add comma to my categoryId array. But I also needed it to be a string of array values instead of an array. I have resolved this matter by using another useState("") hook for the string values.

Collectives™ on Stack Overflow

React Checkbox Hook Array

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related