How to update a state variable correctly using onClick in functional component

Question

I have created two tabs that when clicked need to show a different set of products and a different set of filters for each selection. My problem is that when I click either tab and call setOptions within changeTab, I need to click each tab twice before it will update 'options', 'options' needs to contain each filter.

Obviously calling setOptions within the click handler is not correct but I can't figure out where or how to correctly update 'options'. Help greatly appreciated.

In the console logs below 'dedupedOptions' updates correctly on click

function filterProducts() {

  const [categoryType, setCategory] = useState("Canine");
  const [activeTabIndex, setActiveTabIndex] = useState(0);
  const {
    productData: {
      products: { products }
    }
  } = useContext(AppContext);

  const productsByCategory = products
    .filter((product) => {
      const { tags } = product;
      return !!tags.find((tag) => tag.includes(categoryType));
    })
    .map((product) => ({
      ...product,
      category: product.tags
        .find((tag) => tag.includes("category:"))
        .split(":")[1]
    }));

  let dedupedOptions = [];

  productsByCategory.forEach((product) => {
    const { tags } = product;
    tags.forEach((tag) => {
      const parts = tag.split(":");
      const key = parts[0];
      const value = parts[1] || null;
      const validTag = tagKeysToDisplay.find(
        (tagKeyToDisplay) => tagKeyToDisplay === key
      );
      if (
        validTag &&
        !dedupedOptions.find((dedupedOption) => dedupedOption.value === value)
      ) {
        dedupedOptions = [
          ...dedupedOptions,
          {
            label: titleCase(value),
            value,
            selected: false
          }
        ];
      }
    });
  });

  const [options, setOptions] = useState(dedupedOptions);
  console.log(dedupedOptions);
  console.log(options);

  const changeTab = (index, category) => {
    setCategory(category);
    setActiveTabIndex(index);
    setOptions(dedupedOptions);
  };

  const setFilter = useCallback(
    (selectedOption) => {
      const optionIsActive = options.find(
        (option) => option.value === selectedOption.value
      )?.selected;
      let newOptions = [];
      newOptions = [
        ...options.map((option) => {
          if (option.value === selectedOption.value) {
            return {
              ...option,
              selected: !optionIsActive
            };
          }
          return option;
        })
      ];
      setOptions(newOptions);
    },
    [options]
  );
}

And the two elements set up as tabs to handle the click events. These are rendered within the same filterProducts function.

      <div className="filter-products__tabs">
        <div
          className={`filter-products__tab
          ${activeTabIndex === 0 ? "is-active" : ""}`}
          onClick={changeTab.bind(this, 0, "Canine")}
        >
          <span>DOG</span>
        </div>
        <div
          className={`filter-products__tab
          ${activeTabIndex === 1 ? "is-active" : ""}`}
          onClick={changeTab.bind(this, 1, "Feline")}
        >
          <span>CAT</span>
        </div>
      </div>

Seems whatever dedupedOptions is has a dependency on the categoryType state. I think much of your logic compuing dedupdedOptions could be moved into a useEffect hook with appropriate dependencies. — Drew Reese
– Drew Reese, Commented Jun 15, 2021 at 6:56

faramarz razmi · Accepted Answer · 2021-06-15 11:15:09Z

I reproduced your question by some changes in variable declarations in state. be careful to declare variables in state and do the updates by listening the variable changes inside the useEffect.

here is the working code:\

https://codesandbox.io/s/quirky-http-e264i?file=/src/App.js

import "./styles.css";
import { useState, useContext, useCallback, useEffect } from "react";
export default function App() {
  const [categoryType, setCategory] = useState("Canine");
  const [activeTabIndex, setActiveTabIndex] = useState(0);
  const [productsByCategory, setProductsByCategory] = useState([]);
  const [dedupedOptions, setDedupedOptions] = useState([]);
  const [options, setOptions] = useState(dedupedOptions);

  const products = [
    { tags: ["category:Feline"], name: "one" },
    { tags: ["category:Canine"], name: "two" }
  ];

  useEffect(() => {
    const productsByCategory = products
      .filter((product) => {
        const { tags } = product;
        return !!tags.find((tag) => tag.includes(categoryType));
      })
      .map((product) => ({
        ...product,
        category: product.tags
          .find((tag) => tag.includes("category:"))
          .split(":")[1]
      }));
    setProductsByCategory(productsByCategory);
  }, [categoryType]);

  useEffect(() => {
    let tmp_dedupedOptions = [];
    const tagKeysToDisplay = ["category"];
    productsByCategory.forEach((product) => {
      const { tags } = product;
      tags.forEach((tag) => {
        const parts = tag.split(":");
        const key = parts[0];
        const value = parts[1] || null;
        const validTag = tagKeysToDisplay.find(
          (tagKeyToDisplay) => tagKeyToDisplay === key
        );

        if (
          validTag &&
          !tmp_dedupedOptions.find(
            (dedupedOption) => dedupedOption.value === value
          )
        ) {
          tmp_dedupedOptions = [
            ...tmp_dedupedOptions,
            {
              label: value,
              value,
              selected: false
            }
          ];
        }
      });
    });
    setDedupedOptions(tmp_dedupedOptions);
    setOptions(tmp_dedupedOptions);
  }, [productsByCategory]);

  console.log("options: ", options);

  const changeTab = (index, category) => {
    setCategory(category);
    setActiveTabIndex(index);
  };

  const setFilter = useCallback(
    (selectedOption) => {
      const optionIsActive = options.find(
        (option) => option.value === selectedOption.value
      )?.selected;
      let newOptions = [];
      newOptions = [
        ...options.map((option) => {
          if (option.value === selectedOption.value) {
            return {
              ...option,
              selected: !optionIsActive
            };
          }
          return option;
        })
      ];
      setOptions(newOptions);
    },
    [options]
  );
  // }
  return (
    <div>
      <div className="filter-products__tabs">
        <div
          className={`filter-products__tab
          ${activeTabIndex === 0 ? "is-active" : ""}`}
          onClick={changeTab.bind(this, 0, "Canine")}
        >
          <span>DOG</span>
        </div>
        <div
          className={`filter-products__tab
          ${activeTabIndex === 1 ? "is-active" : ""}`}
          onClick={changeTab.bind(this, 1, "Feline")}
        >
          <span>CAT</span>
        </div>
      </div>
    </div>
  );
}

Collectives™ on Stack Overflow

How to update a state variable correctly using onClick in functional component

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