React change parent array properties

Question

In the parent component manage-categories.jsx I have an array declared categoryTypes

const categoryTypes = [
    { name: "category", values: props.categories, active: true },
    { name: "type", values: props.types },
    { name: "finish", values: props.finishes },
    { name: "profile", values: props.profiles },
    { name: "thickness", values: props.thicknesses },
    { name: "ral", values: props.rals },
  ];

and a function selectItem that is called in the child component category-types-card.jsx

const selectItem = (item, category) => {
    switch (category.name) {
      case "category":
        setSelectedCategoryItem(item);
        break;
      case "type":
        setSelectedTypeItem(item);
        break;
      case "finish":
        setSelectedFinishItem(item);
        break;
      case "profile":
        setSelectedProfileItem(item);
        break;
      case "thickness":
        setSelectedThicknessItem(item);
        break;
      case "ral":
        setSelectedRalItem(item);
    }
  };

In the child component I need to show something for the categories that have active: true Category becomes active when it has an selectedItem.

I tried to make it active like categoryTypes[1] = { ...categoryTypes[1], active: true }; in the above switch, but in the child component the active property does not change for the certain category.

Calling the child component:

<Row className="mb-4">
        {categoryTypes.map((category, index) => {
          return (
            <Colxx
              xxs="12"
              xs="6"
              sm="6"
              md="6"
              lg="4"
              xl="4"
              xxl="4"
              key={index}
            >
              <CategoryTypes
                category={category}
                employee={employee}
                selectItem={selectItem}
                selectedCategoryItem={selectedCategoryItem}
                selectedTypeItem={selectedTypeItem}
                selectedFinishItem={selectedFinishItem}
                selectedProfileItem={selectedProfileItem}
                selectedThicknessItem={selectedThicknessItem}
                selectedRalItem={selectedRalItem}
              />
            </Colxx>
          );
        })}
      </Row>

How should I handle correctly this situation?

Thanks in advance!

You need to have the active property inside the props.categories — TheLastStark
– TheLastStark, Commented Dec 17, 2020 at 11:31
@simpller Could you please post some more code? At least show how you render the child component and pass it the props. — Eyal
– Eyal, Commented Dec 17, 2020 at 11:39

Eyal · Accepted Answer · 2020-12-17 12:48:50Z

How about passing a callback to the child component? Like so:

const ManageCategories = (props) => {
  const [categoryTypes, setCategoryTypes] = useState([
    { name: "category", values: props.categories, active: true },
    { name: "type", values: props.types },
    { name: "finish", values: props.finishes },
    { name: "profile", values: props.profiles },
    { name: "thickness", values: props.thicknesses },
    { name: "ral", values: props.rals },
  ])

  const setCategoryTypeActive = (categoryName, active) => {
    setCategoryTypes((categoryTypes) =>
      categoryTypes.map((categoryType) =>
        categoryType.name === categoryName
          ? { ...categoryType, active }
          : categoryType
      )
    )
  }

  return (
    <Row className="mb-4">
      {categoryTypes.map((category, index) => (
        <Colxx xxs="12" xs="6" sm="6" md="6" lg="4" xl="4" xxl="4" key={index}>
          <CategoryTypes
            category={category}
            employee={employee}
            selectItem={selectItem}
            selectedCategoryItem={selectedCategoryItem}
            selectedTypeItem={selectedTypeItem}
            selectedFinishItem={selectedFinishItem}
            selectedProfileItem={selectedProfileItem}
            selectedThicknessItem={selectedThicknessItem}
            selectedRalItem={selectedRalItem}
            setCategoryTypeActive={setCategoryTypeActive}
          />
        </Colxx>
      ))}
    </Row>
  )
}

Then, somewhere in your child component, for example:

const CategoryTypesCard = (props) => {
  props.setCategoryTypeActive("finish", true)

  // ...
}

Collectives™ on Stack Overflow

React change parent array properties

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related