I have an array that I want to pass to checkboxes and then from this list of checkboxes, tick those that match.

The user array:

[
    {
        "Category": "XXX",
        "Name": "123",
        "Weight": "1"
    },
    {
        "Category": "ZZZ",
        "Name": "456",
        "Weight": "2"
    }
]

Array of all:

[
    {
        "Category": "XXX",
        "Name": "123",
        "Weight": "1"
    },
    {
        "Category": "ZZZ",
        "Name": "456",
        "Weight": "2"
    },
    {
        "Category": "AAA",
        "Name": "789",
        "Weight": "2"
    },
    {
        "Category": "BBB",
        "Name": "012",
        "Weight": "2"
    }
]

So the result would look like this:

[X] 123 [X] 456 [ ]789 [ ]012

Basically, the user selects when adding to the collection items, and then when they update this collection, it needs to show them what they have already ticked, so they can add/remove from the array.

How can I achieve this? I am using Material UI Checkbox.

CodePudding user response：

link code in codesandbox

    import "./styles.css";
import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
const listAll = [
  {
    Category: "XXX",
    Name: "123",
    Weight: "1"
  },
  {
    Category: "ZZZ",
    Name: "456",
    Weight: "2"
  },
  {
    Category: "AAA",
    Name: "789",
    Weight: "2"
  },
  {
    Category: "BBB",
    Name: "012",
    Weight: "2"
  }
];
const listUser = [
  {
    Category: "XXX",
    Name: "123",
    Weight: "1"
  },
  {
    Category: "ZZZ",
    Name: "456",
    Weight: "2"
  }
];
export default function App() {
  return (
    <div className="App">
      <FormGroup>
        {listAll.map((t) => (
          <FormControlLabel
            control={
              <Checkbox checked={listUser.some((p) => p.Name === t.Name)} />
            }
            label={t.Name}
          />
        ))}
      </FormGroup>
    </div>
  );
}

CodePudding user response：

This?

const defaultOptions = [
  {
    "Category": "XXX",
    "Name": "123",
    "Weight": "1"
  },
  {
    "Category": "ZZZ",
    "Name": "456",
    "Weight": "2"
  },
  {
    "Category": "AAA",
    "Name": "789",
    "Weight": "2"
  },
  {
    "Category": "BBB",
    "Name": "012",
    "Weight": "2"
  }
];

/**
 * 
 * @param { selected }: selected = [
 *   {
 *       "Category": "XXX",
 *       "Name": "123",
 *       "Weight": "1"
 *   },
 *   {
 *       "Category": "ZZZ",
 *       "Name": "456",
 *       "Weight": "2"
 *   }
 * ]
 */
const CheckBoxes = ({ selected, onChange }) => {
  // update automatically according to "selected"
  const options = useMemo(() => defaultOptions.map(option => ({
    ...option,
    checked: selected.some(({ Name }) => Name === option.Name) // assume Name is unique
  })), [selected]);

  return (
    <FormControl component="fieldset">
      <FormLabel component="legend">{/* label */}</FormLabel>
      <FormGroup>
        {options.map(({ Name, checked }) => (
          <FormControlLabel
            key={Name}
            control={
              <Checkbox checked={checked} onChange={onChange} name={Name} />
            }
            label={Name}
          />
        ))}
      </FormGroup>
      <FormHelperText>Be careful</FormHelperText>
    </FormControl>
  )
};