0
122
VisualizaçõesonClick en React cambia todos los estados de las clases en reaccionar
He creado un aparte en reaccionar y quiero cambiar su estado a activo cuando hago clic en cada uno de ellos, pero cuando hago clic en cualquier elemento, todos se activan de repente. ¿Cómo arreglar esto?
import React, { useState, useEffect } from "react"; import { Col, Image, Row } from "react-bootstrap"; import "./Company.scss"; // * api import { getCoin } from "../services/api"; // *spinner import Loader from "./Loader"; const Company = () => { const [changeClass, setChangeClass] = useState(false); const [coins, setCoins] = useState([]); useEffect(() => { const fetchAPI = async () => { const data = await getCoin(); setCoins(data); }; fetchAPI(); }, []); const myHandler = () => { setChangeClass(true); console.log("trued"); }; const myHandler2 = () => { console.log(); }; return ( <> {coins.length ? ( coins.map((coin) => ( <Row className={ changeClass ? "p-2 border-top d-flex align-items-center company-list-single-active" : "p-2 border-top d-flex align-items-center company-list-single" } onClick={() => { myHandler(); myHandler2(); }} key={coin.id} > <Col xxl="2" xl="2" lg="2" md="2" sm="2" xs="2"> <Image src={coin.image} alt={coin.name} className="coin-image mx-2" fluid /> </Col> <Col> <span>{coin.name}</span> </Col> </Row> )) ) : ( <Loader /> )} </> ); }; export default Company; 
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
usa una prueba para mostrar la moneda seleccionada por el mismo estado y se alterna entre verdadero o falso. Agregué un estado para guardar la moneda seleccionada y probarla en bucle. En onClick podemos actualizar directamente el elemento seleccionado.
no puedes hacer eso "monedas.longitud?" esto siempre será cierto si el tipo de monedas es una matriz. Agregué una prueba como "monedas.longitud> 0?" aquí la solución
import React, { useState, useEffect } from 'react'; import { Col, Image, Row } from 'react-bootstrap'; import './Company.scss'; // * api import { getCoin } from '../services/api'; // *spinner import Loader from './Loader'; const Company = () => { const [selectedCoin, setSelectedCoin] = useState(null); const [coins, setCoins] = useState([]); useEffect(() => { const fetchAPI = async () => { const data = await getCoin(); setCoins(data); }; fetchAPI(); }, []); return ( <> {coins.length > 0 ? ( coins.map((coin) => ( <Row className={ selectedCoin === coin.id ? 'p-2 border-top d-flex align-items-center company-list-single-active' : 'p-2 border-top d-flex align-items-center company-list-single' } onClick={() => setSelectedCoin(coin.id)} key={coin.id} > <Col xxl="2" xl="2" lg="2" md="2" sm="2" xs="2"> <Image src={coin.image} alt={coin.name} className="coin-image mx-2" fluid /> </Col> <Col> <span>{coin.name}</span> </Col> </Row> )) ) : ( <Loader /> )} </> ); }; export default Company;
·
Juan Pablo Isaza
Relatório
Responde à pergunta