I am mapping the objects of an array and making them tabs, and what I want to achieve is when one tab is clicked, it should change the property of that tab and all other tabs.

Here is the sandbox example:

CodePudding user response：

The state needs to be updated properly from the child. As the values are unique, you can use that as key and also for determining which tab needs to be set to true.

function Tab({ tab, setTabs }) {
  return (
    <div
      className={`customer__account__tabs ${tab.selected && "active_btn"}`}
      onClick={() => {
        setTabs((prevTabs) =>
          prevTabs.map((prevTab) =>
            prevTab.value === tab.value
              ? { ...prevTab, selected: true }
              : { ...prevTab, selected: false }
          )
        );
      }}
    >
      <div className="customer__account__tabs__title">{tab.value}</div>
      <div>{tab.selected.toString()}</div>
    </div>
  );
}
const initialState = [
  { value: "theValue 1", selected: false },
  { value: "theValue 2", selected: false },
  { value: "theValue 3", selected: false },
  { value: "theValue 4", selected: false },
  { value: "theValue 5", selected: false }
];

export default function App() {
  const [tabs, setTabs] = useState(initialState);

  return (
    <div>
      {tabs.map((tab) => {
        return <Tab key={tab.value} tab={tab} setTabs={setTabs} />;
      })}
    </div>
  );
}

CodePudding user response：

Try this:

import "./styles.css";
import React, { useState } from "react";

export default function App() {
    const [attributeValue, setAttributeValue] = ([
        { theValue: "theValue 1", selected: "false" },
        { theValue: "theValue 2", selected: "false" },
        { theValue: "theValue 3", selected: "false" },
        { theValue: "theValue 4", selected: "false" },
        { theValue: "theValue 5", selected: "false" }
    ]);
    return (
        <div>
            {attributeValue.map((obj, index) => {
                return (
                    <TestingTabs
                        theValue={obj.theValue}
                        theIndex={index}
                        theSelected={obj.selected}
                        setAttributeValue={setAttributeValue}
                    ></TestingTabs>
                );
            })}
        </div>
    );
    function TestingTabs({ theValue, theSelected, theIndex, setAttributeValue }) {
        const [theSelectedValue, setTheSelectedValue] = useState(theSelected);

        const changeOtherToFalse = () => {
            setAttributeValue((prevAttrs) => {
                const nextAttrs = prevAttrs.map((item, index) => {
                    if (index === theIndex) {
                    } else {
                        item.selected = false;
                    }
                });
                return nextAttrs;
            })
        };
        return (
            <div
                className={`customer__account__tabs ${theSelectedValue === "true" && "active_btn"
                    }`}
                onClick={() => {
                    if (theSelectedValue === "true") {
                    } else {
                        setTheSelectedValue("true");
                        changeOtherToFalse();
                    }
                }}
            >
                <div className="customer__account__tabs__title">{theValue}</div>

                <div>{theSelectedValue}</div>
            </div>
        );
    }
}