Como precursor encontré otras dos publicaciones con la misma pregunta, una sin respuesta y la otra no tiene una respuesta suficiente ya que no está mapeando datos en la respuesta, aquí está la publicación React-card-flip voltea todas las tarjetas con un solo clic .

Estoy usando react-card-flip desde aquí https://www.npmjs.com/ package / react-card-flip, y tratando de mapear a través de mi ProjectData.json y devolver una tarjeta para que se voltee para todos mis datos. Todo funciona, excepto por el hecho de que todas las cartas se voltean al mismo tiempo cuando alguna de ellas queda suspendida.

En mi código, encontrará que eliminé el botón y onClick como ve en el sitio web react-card-flip npm y reemplacé el div frontal con un onMouseEnter y el div posterior con un onMouseLeave, esto es solo para que la animación de la tarjeta funcione on hover en lugar de onClick.

Projects.js

import React from 'react'
import ReactCardFlip from 'react-card-flip';
import Data from '../../ProjectData.json';
import './Projects.scss';


class Projects extends React.Component {
  constructor() {
    super();
      this.state = {
      isFlipped: false
    };
    this.handleClick = this.handleClick.bind(this);
  }
 
  handleClick(e) {
    e.preventDefault();
    this.setState(prevState => ({ isFlipped: !prevState.isFlipped }));
  }
 
  render() {
    return (
      <div className="Projects">
      {Data.map(project => {
        return (
        <ReactCardFlip isFlipped={this.state.isFlipped} flipDirection="horizontal">
        <div onMouseEnter={this.handleClick} className="CardFront">
          <div >
            This is the fron of the card
              <h3>{project.title}</h3>
              <img src={project.gif} />
              <ul>
                <li>{project.html}</li>
                <li>{project.css}</li>
                <li>{project.javascript}</li>
                <li>{project.react}</li>
              </ul>
          </div>
        </div>
 
        <div onMouseLeave={this.handleClick} className="CardBack">
          This is the back of the card.
        </div>
      </ReactCardFlip>
        )
      })}
      </div>
    )
    }
}

export default Projects

ProjectData.json

[
    {
        "title": "Movie Search app",
        "link": "",
        "html": "HTML",
        "css": "CSS",
        "javascript": "JavaScript",
        "react":"React",
        "api": "Axios",
        "gif": "https://media.giphy.com/media/YrSZQZTMsdT0qrOZOk/source.gif",
        "description": "A movie search application using MovieDB's API that displays movie information, conver art, aswell as Related Searches and Trending Searches."
    },
    {
        "title": "Movie Search app",
        "link": "",
        "html": "HTML",
        "css": "CSS",
        "javascript": "JavaScript",
        "react":"React",
        "api": "Axios",
        "gif": "https://media.giphy.com/media/YrSZQZTMsdT0qrOZOk/source.gif",
        "description": "A movie search application using MovieDB's API that displays movie information, conver art, aswell as Related Searches and Trending Searches."
    },
    {
        "title": "Movie Search app",
        "link": "",
        "html": "HTML",
        "css": "CSS",
        "javascript": "JavaScript",
        "react":"React",
        "api": "Axios",
        "gif": "https://media.giphy.com/media/YrSZQZTMsdT0qrOZOk/source.gif",
        "description": "A movie search application using MovieDB's API that displays movie information, conver art, aswell as Related Searches and Trending Searches."
    }
]
0
Caleb 28 ago. 2020 a las 15:05

1 respuesta

La mejor respuesta

import React from "react";
import ReactCardFlip from "react-card-flip";
import Data from "./data.json";

const CardStyle = {
  border: "1px solid black",
  padding: "20px",
  margin: "20px",
  width: "200px",
  height: "300px"
};

const Card = ({ project }) => {
  const [isFlipped, setIsFlipped] = React.useState(false);
  // console.log(project);
  return (
    <ReactCardFlip isFlipped={isFlipped} flipDirection="horizontal">
      <div
        style={CardStyle}
        onMouseEnter={() => setIsFlipped((prev) => !prev)}
        className="CardFront"
      >
        <div>
          This is the fron of the card
          <h3>{project.title}</h3>
          <img width="200" src={project.gif} alt="" />
          <ul>
            <li>{project.html}</li>
            <li>{project.css}</li>
            <li>{project.javascript}</li>
            <li>{project.react}</li>
          </ul>
        </div>
      </div>
      <div
        style={CardStyle}
        onMouseLeave={() => setIsFlipped((prev) => !prev)}
        className="CardBack"
      >
        This is the back of the card.
      </div>
    </ReactCardFlip>
  );
};

const Projects = () => {
  return (
    <div style={{ margin: "auto", width: "50%" }} className="Projects">
      {Data.map((item, index) => (
        <Card project={item} key={`card-${index}`} />
      ))}
    </div>
  );
};

export default Projects;

Edit kind-jackson-jzp9u

1
Dean 28 ago. 2020 a las 16:16