0
380
Vistas¿Cómo cambiar el valor de todos los objetos dentro de la espera, excepto el que se hace clic en React js?
Estoy mapeando los objetos de una matriz y convirtiéndolos en pestañas, y lo que quiero lograr es que cuando se haga clic en una pestaña, debería cambiar la propiedad de esa pestaña y todas las demás pestañas.
Aquí está el ejemplo de la caja de arena: 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> ); } } aquí supongamos que cuando se haga clic en la primera pestaña, el valor seleccionado de eso debería ser verdadero y todo
las otras pestañas deberían ser falsas, pero eso no sucede. Lo que sucede es cuando una pestaña es
al hacer clic se vuelve verdadero y no hace que otras pestañas sean falsas 
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
El estado debe actualizarse correctamente desde el niño. Como los valores son únicos, se pueden usar como claves y para determinar qué pestaña debe seleccionarse.
por cierto, el componente secundario no necesita ningún estado
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
Denunciar
0
Prueba esto:
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
Denunciar
Responde la pregunta