Comment utiliser la condition pour ajouter ou supprimer les balises fermantes contenant des htms dans JSX ?

Question

Balise Fade qui est une balise d'animation sous le paquet react-reveal Je veux utiliser Fade pour l'animation uniquement lorsque ma souris passe sous la balise div sinon je ne veux pas animer la balise div className=card-container mais pour ce faire, je dois répéter le code div className=card-container ainsi { isHover ? <Fade>div className="card-container"</Fade> : div className="card-container" }

Existe-t-il une alternative pour supprimer la balise Fade de manière simple.

import React from "react";
import styled from "styled-components";
import { Fade } from "react-reveal";

export default function CardSection() {
    const [isHover, setIsHover] = React.useState(false);

    function getIsHover() {
        setIsHover((prev) => !prev);
    }

    return(
        <CardSectionStyled>
            <div onMouseEnter={getIsHover}>
                <div className="card-container">
                    {/* Here I have to repeat p tag in order to add and remove Fade tag  */}
                    {isHover ? <Fade right duration={1500} delay={500}>
                        <div className="card-left">
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab 
                            </p>
                        </div>
                    </Fade> :
                        <div className="card-left">
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab
                            </p>
                        </div>
                    }
            </div>
        </CardSectionStyled>
    );
}

const CardSectionStyled = styled.section`
    .card-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }

    p {
      padding: 1.5rem 0;
    }
`;

Answer 1

Les éléments React sont des valeurs (plus précisément, ce sont des objets), vous pouvez les mettre dans des variables. Vous pouvez donc mettre cet élément div dans une variable (disons, cardLeft ) et de l'utiliser aux deux endroits où vous en avez besoin :

export default function CardSection() {
    const [isHover, setIsHover] = React.useState(false);

    function getIsHover() {
        setIsHover((prev) => !prev);
    }

    // *** Put the React element for the `div` in a variable
    const cardLeft = (
        <div className="card-left">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab 
            </p>
        </div>
    );
    // *** Use `cardLeft` in the two places you need it below
    return(
        <CardSectionStyled>
            <div onMouseEnter={getIsHover}>
                <div className="card-container">
                    {isHover
                        ?   <Fade right duration={1500} delay={500}>
                                {cardLeft}
                            </Fade>
                        :   cardLeft
                    }
                </div>
            </div>
        </CardSectionStyled>
    );
}

(J'ai également ajouté un </div> .)

Il y a une douzaine de façons différentes de présenter les choses. Par exemple :

export default function CardSection() {
    const [isHover, setIsHover] = React.useState(false);

    function getIsHover() {
        setIsHover((prev) => !prev);
    }

    let cardLeft = (
        <div className="card-left">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab 
            </p>
        </div>
    );
    if (isHover) {
        cardLeft = (
            <Fade right duration={1500} delay={500}>
                {cardLeft}
            </Fade>
        );
    }
    return(
        <CardSectionStyled>
            <div onMouseEnter={getIsHover}>
                <div className="card-container">{cardLeft}</div>
            </div>
        </CardSectionStyled>
    );
}