0
377
ViewsHow to change the value of all the objects inside the expect except the one which is clicked in React js?
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: https://vnlrf.csb.app/
import "./styles.css";
import React, { useState } from "react";
export default function App() {
const attributeValue = [
{ 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}
entireArray={attributeValue}
></TestingTabs>
);
})}
</div>
);
function TestingTabs({ theValue, theSelected, theIndex, entireArray }) {
const [theSelectedValue, setTheSelectedValue] = useState(theSelected);
const changeOtherToFalse = () => {
entireArray.map((obj, index) => {
if (index === theIndex) {
} else {
obj.selected = false;
}
});
};
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>
);
}
}
here suppose when the first tab will be clicked, the selected value of that should be true and all
the other tabs should be false, but that does not happen. What happens is when one tab is
clicked it becomes true and it does not make another tabs false
·
Juan Pablo Isaza
2 answers
Answer question0
The state needs to be updated properly from the child. As the values are unique, they can be used as keys and for determining which tab needs to be selected.
btw, the child component doesn't need any state
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>
);
}
·
Juan Pablo Isaza
Report
0
Try this:
import "./styles.css";
import React, { useState } from "react";
function TestingTabs({ theValue, theSelected, theIndex, setAttributeValue }) {
const changeOtherToFalse = () => {
setAttributeValue((prevAttrs) => {
const nextAttrs = [...prevAttrs];
nextAttrs.map((item, index) => {
item.selected = (index === theIndex);
});
return nextAttrs;
})
};
return (
<div
className={`customer__account__tabs ${theSelected && "active_btn"
}`}
onClick={() => {
if (theSelected) {
} else {
changeOtherToFalse();
}
}}
>
<div className="customer__account__tabs__title">{theValue}</div>
<div>{theSelected.toString()}</div>
</div>
);
}
export default function App() {
const [attributeValue, setAttributeValue] = useState([
{ 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) => (
<TestingTabs
theValue={obj.theValue}
theIndex={index}
theSelected={obj.selected}
setAttributeValue={setAttributeValue}
/>
))
}
</div>
);
}
·
Juan Pablo Isaza
Report
Answer question