Skip to main content
se eliminaron 79 caracteres en el cuerpo
Origen Enlace
user128299
user128299

es bueno que tomes ventaja del state de react para renderizar las tarjetas de forma dinamica. Hice unos cambios en el codigo que tienes en stackblitz.

Esta es la modificacion del archivo index.js:

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Tarjeta from './components/Tarjeta'

const idTarjetas = [1, 2, 3, 4 , 5];

class App extends Component {
  state = {
    tarjetaSeleccionada: 0
  }

  cambio = id => {
    this.setState({
      tarjetaSeleccionada: id
   });
  };

  render() {
    return(
      <div>
        {idTarjetas.map(id => (
          <Tarjeta
            className={`tarjeta ${this.state.tarjetaSeleccionada === id ? 'focus' : ''}`}
            key={id}
            id={id}
            onClick={() => this.cambio(id)} />
        ))}
       </div>
    )
  }
}

render(<App />, document.getElementById('root'));

y este es el de Tarjeta.js

import React from "react";

function Tarjeta({ id, onClick, className }) {

return (
    <div className={className} onClick={onClick}>
      hola
    </div>
  );
}
export default Tarjeta;

Las modificaciones que hice fueron:

  1. Cambiar de functional component a class component
  2. crear una array (idTarjetas) para iterar sobre el en el render y poder generar las 5 tarjetas sin necesidad de escribirla una por una.
  3. usar el estado de react
  4. crear un metodo llamado cambio para hacer un setState en la variable de estado 'tarjetaSeleccionada'para saber que id se selecciono.
  5. en el return pasarle por props al componente Tarjeta la funcion cambio y el nombre de la clase que me va a agregar la clase focus dependiendo si el id clickeado es igual al id de la tarjeta.
  6. Como pudiste notar el componente Tarjeta solo me esta retornado jsx mientra el indez esta manejando la logica.

Espero que haya sido de ayuda . Si depronto hay algo no muy claro preguntame . Buena suerte en el aprendizaje de React.

es bueno que tomes ventaja del state de react para renderizar las tarjetas de forma dinamica. Hice unos cambios en el codigo que tienes en stackblitz.

Esta es la modificacion del archivo index.js:

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Tarjeta from './components/Tarjeta'

const idTarjetas = [1, 2, 3, 4 , 5];

class App extends Component {
  state = {
    tarjetaSeleccionada: 0
  }

  cambio = id => {
    this.setState({
      tarjetaSeleccionada: id
   });
  };

  render() {
    return(
      <div>
        {idTarjetas.map(id => (
          <Tarjeta
            className={`tarjeta ${this.state.tarjetaSeleccionada === id ? 'focus' : ''}`}
            key={id}
            id={id}
            onClick={() => this.cambio(id)} />
        ))}
       </div>
    )
  }
}

render(<App />, document.getElementById('root'));

y este es el de Tarjeta.js

import React from "react";

function Tarjeta({ id, onClick, className }) {

return (
    <div className={className} onClick={onClick}>
      hola
    </div>
  );
}
export default Tarjeta;

Las modificaciones que hice fueron:

  1. Cambiar de functional component a class component
  2. crear una array (idTarjetas) para iterar sobre el en el render y poder generar las 5 tarjetas sin necesidad de escribirla una por una.
  3. usar el estado de react
  4. crear un metodo llamado cambio para hacer un setState en la variable de estado 'tarjetaSeleccionada'para saber que id se selecciono.
  5. en el return pasarle por props al componente Tarjeta la funcion cambio y el nombre de la clase que me va a agregar la clase focus dependiendo si el id clickeado es igual al id de la tarjeta.
  6. Como pudiste notar el componente Tarjeta solo me esta retornado jsx mientra el indez esta manejando la logica.

Espero que haya sido de ayuda . Si depronto hay algo no muy claro preguntame . Buena suerte en el aprendizaje de React.

es bueno que tomes ventaja del state de react para renderizar las tarjetas de forma dinamica. Hice unos cambios en el codigo que tienes en stackblitz.

Esta es la modificacion del archivo index.js:

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Tarjeta from './components/Tarjeta'

const idTarjetas = [1, 2, 3, 4 , 5];

class App extends Component {
  state = {
    tarjetaSeleccionada: 0
  }

  cambio = id => {
    this.setState({
      tarjetaSeleccionada: id
   });
  };

  render() {
    return(
      <div>
        {idTarjetas.map(id => (
          <Tarjeta
            className={`tarjeta ${this.state.tarjetaSeleccionada === id ? 'focus' : ''}`}
            key={id}
            id={id}
            onClick={() => this.cambio(id)} />
        ))}
       </div>
    )
  }
}

render(<App />, document.getElementById('root'));

y este es el de Tarjeta.js

import React from "react";

function Tarjeta({ id, onClick, className }) {

return (
    <div className={className} onClick={onClick}>
      hola
    </div>
  );
}
export default Tarjeta;

Las modificaciones que hice fueron:

  1. Cambiar de functional component a class component
  2. crear una array (idTarjetas) para iterar sobre el en el render y poder generar las 5 tarjetas sin necesidad de escribirla una por una.
  3. usar el estado de react
  4. crear un metodo llamado cambio para hacer un setState en la variable de estado 'tarjetaSeleccionada'para saber que id se selecciono.
  5. en el return pasarle por props al componente Tarjeta la funcion cambio y el nombre de la clase que me va a agregar la clase focus dependiendo si el id clickeado es igual al id de la tarjeta.
  6. Como pudiste notar el componente Tarjeta solo me esta retornado jsx mientra el indez esta manejando la logica.

Si depronto hay algo no muy claro preguntame

Origen Enlace

es bueno que tomes ventaja del state de react para renderizar las tarjetas de forma dinamica. Hice unos cambios en el codigo que tienes en stackblitz.

Esta es la modificacion del archivo index.js:

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Tarjeta from './components/Tarjeta'

const idTarjetas = [1, 2, 3, 4 , 5];

class App extends Component {
  state = {
    tarjetaSeleccionada: 0
  }

  cambio = id => {
    this.setState({
      tarjetaSeleccionada: id
   });
  };

  render() {
    return(
      <div>
        {idTarjetas.map(id => (
          <Tarjeta
            className={`tarjeta ${this.state.tarjetaSeleccionada === id ? 'focus' : ''}`}
            key={id}
            id={id}
            onClick={() => this.cambio(id)} />
        ))}
       </div>
    )
  }
}

render(<App />, document.getElementById('root'));

y este es el de Tarjeta.js

import React from "react";

function Tarjeta({ id, onClick, className }) {

return (
    <div className={className} onClick={onClick}>
      hola
    </div>
  );
}
export default Tarjeta;

Las modificaciones que hice fueron:

  1. Cambiar de functional component a class component
  2. crear una array (idTarjetas) para iterar sobre el en el render y poder generar las 5 tarjetas sin necesidad de escribirla una por una.
  3. usar el estado de react
  4. crear un metodo llamado cambio para hacer un setState en la variable de estado 'tarjetaSeleccionada'para saber que id se selecciono.
  5. en el return pasarle por props al componente Tarjeta la funcion cambio y el nombre de la clase que me va a agregar la clase focus dependiendo si el id clickeado es igual al id de la tarjeta.
  6. Como pudiste notar el componente Tarjeta solo me esta retornado jsx mientra el indez esta manejando la logica.

Espero que haya sido de ayuda . Si depronto hay algo no muy claro preguntame . Buena suerte en el aprendizaje de React.