tengo un componente asi
const Row = () => { const [isActive, setIsActive] = React.useState(false); return ( <div style={{ backgroundColor: isActive ? 'green' : '#c8c7c5', }} onClick={e => { setIsActive(currentState => { return !currentState; }); }} > hello </div> ); };Estoy usando el componente varias veces en otro componente como este
const ItemsArr= [ { id: 'list-1', component: <Row /> }, { id: 'list-2', component: <Row /> }, { id: 'list-3', component: <Row /> } ]; const [listItems, setListItems] = React.useState(ItemsArr);Para el componente Fila, hago clic en él y cambia el color de fondo. cuando vuelvo a hacer clic, el color de fondo vuelve a cambiar al original. Esto está funcionando bien.
Lo que quiero hacer es, cuando hago clic en el componente Fila, todos los demás componentes de Fila seleccionados deben eliminarse, de modo que el que selecciono, solo debe tener el fondo.
¿Puede alguien por favor ayudarme con esto?
necesita tener una bandera separada para cada artículo. Por ejemplo, puede consultar el siguiente fragmento.
Debe verificar el índice y luego asignar valor a esa bandera
const tempData = [...arryData]; tempData[index] = { ...tempData[index], isActive: value, }; setState(tempData);Espero que esto sea útil, gracias.
export const Row = () => { return ( <div > hello </div> ); };Así es como puede configurar la fila de color de fondo:
const ItemsArr= [ { id: 'list-1', component: <Row /> }, { id: 'list-2', component: <Row /> }, { id: 'list-3', component: <Row /> } ]; const [listItems, setListItems] = React.useState(ItemsArr); <div> {listItems.map((item, index) => ( <div onClick={() => setIsActive(index)} style={{ backgroundColor: index === isActive ? 'green' : '#c8c7c5', }}> {item.component} </div> ))} </div>Puedes hacer esto
const Row = ({id, isActive, onClick}) => { return ( <div style={{ backgroundColor: isActive ? 'green' : '#c8c7c5', }} onClick={()=>onClick(id)} > hello </div> ); }; export default function App() { const ItemsArr= [ { id: 'list-1', component: Row }, { id: 'list-2', component: Row }, { id: 'list-3', component: Row } ]; const [activeID, setActiveID] = React.useState(""); const [listItems, setListItems] = React.useState(ItemsArr); return ( <div className="App"> {listItems.map(item=>( <item.component id={item.id} isActive={item.id === activeID} key={item.id} onClick={setActiveID} /> ))} </div> ); }