2
\$\begingroup\$

I have several products. A product can have 1 or more images. In each image, we have content slot. I don't want duplication per content slot in a product.

My code works fine. I'm just wondering what will be a better way to do this or improvement on my code?

Codesandbox is here CLICK HERE

    <Autocomplete
      fullWidth
      size="small"
      options={
        Boolean(product.slot) && product.slot.length > 0
          ? contentSlots.filter(
              (slot) =>
                !product.slot.find((data) => data.value.id === slot.id)
            )
          : contentSlots
      }
      renderInput={(params) => (
        <TextField
          {...params}
          label="Content Slots"
          variant="outlined"
          fullWidth
        />
      )}
      getOptionLabel={(option) => option.name || ""}
      disableClearable={true}
      onChange={(_, value) => onChangeContentSlot(value, product)}
    />
\$\endgroup\$

1 Answer 1

Reset to default
2
\$\begingroup\$

The filtering of options logic can be simplified a bit. Instead of first checking that the product slot array exists and has a truthy length, just allow the array's .find method to handle empty arrays, using Optional Chaining to access this deeply into the product object. You can also merge the two logic branches by returning true when the conditions are not met and the currently iterated element should not be filtered out, which happens any time the optional chaining hits a null or undefined property or there are no matches found.

options={contentSlots.filter(
  (slot) => !product?.slot?.find((data) => data.value.id === slot.id)
)}
\$\endgroup\$
2
  • \$\begingroup\$ How about on the reducer? appConstants.CHANGE_CONTENT_SLOTS. Was it structured and coded correctly? or there is a better way? \$\endgroup\$ Commented Nov 30, 2021 at 0:53
  • \$\begingroup\$ @Joseph Oh, sorry, I thought you were only asking about the filtering of options. Yeah, the CHANGE_CONTENT_SLOTS reducer case looks good to me. \$\endgroup\$ Commented Nov 30, 2021 at 1:07

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.