Ouvrir un pdf avec REACT

Bonjour, j'aimerai ouvrir un pdf grâce à une balise link, exemple :

Code:

---

1 2 3 4 5 6 7 8 9

{ id:1, name:"Création d'un site avec Symfony 4 : base de donnée + formulaire", tags:["Symfony","sql","formulaire"], date:"octobre, 2021", imgSrc:"https://res.cloudinary.com/practicaldev/image/fetch/s--sBeV06Xc--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yrzy75q4dzibqz6rf82.png", link: '../assets/GestionLivreRendu.pdf' },

---

sauf que ça ouvre bien une nouvelle page, mais vide, et pas de pdf en vue.

J'ai donc essayer de mettre une balise <a> avec un href vers le pdf lors de la création de la "box" (une sorte de div qui affiche les paramètres de ci-dessus)
Cela marche, mais je n'arrive pas à choisir en fonction de l'id de l'objet donné.
Je pensais à mettre un :

Code:

---

1 2 3 4 5 6

if(id === 1){ <Box target="_blank" to={{ pathname: `${Pdf}` }}> } if(id === 2){ <Box target="_blank" to={{ pathname: `${Pdf2}` }}> }

---

en sachant que Pdf et Pdf2 sont des import des pdfs (import Pdf from '../assets/fifactRendu.pdf';)
Je pense que c'est censé marcher mais je débute et j'arrive vraiment pas a utiliser les if en prenant la variable id, quelqu'un pour m'aider soit à faire la méthode des if, soit à m'expliquer une autre façon de le faire.
PS : Toutes les "div" qui affichent les objets sont créer d'un coup (comme un foreach quoi), du coup je peux changer que la variable avec des conditions :/

Il n'est pas possible d'utiliser des if dans le return d'un .jsx pour rendre un composant optionnel, la méthode est la suivante :
{id ===0 && <MyComponent/>} la deuxième partie du test (<MyComponent/>) est toujours vraie donc si le membre de gauche est vrai alors <MyComponent/> sera rendu.

Alors je dois faire quoi si le if ne marche pas ?

je t'ai donné la réponse dans mon message précédent, il suffit de l'adapter

Citation:

---

Envoyé par -Nikopol-

Il n'est pas possible d'utiliser des if dans le return d'un .jsx pour rendre un composant optionnel, la méthode est la suivante :
{id ===0 && <MyComponent/>} la deuxième partie du test (<MyComponent/>) est toujours vraie donc si le membre de gauche est vrai alors <MyComponent/> sera rendu.

---

ça veut dire que, je dois mettre
{id ===0 && <MyComponent/>} (MyComponent c'est quoi?)

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

const Box = styled(motion(NavLink))` backdrop-filter: blur(2px); box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2); text-decoration: none; width: calc(10rem + 15vw); height: 20rem; border: 2px solid ${(props) => props.theme.text}; padding: 1rem; color: ${(props) => props.theme.text}; `}; `;

---

En fait je comprends pas comment ça marche ;(
A quel moment je choisi la variable qui sera dans le pathname ?

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

const BlogComponent = (props) => { const { name, tags, date, imgSrc, link } = props.blog; return ( <Container variants={item}> <Box target="_blank" to={{ pathname: `${link}` }}> <Image img={imgSrc} /> <Title>{name}</Title> <HashTags> {tags.map((t, id) => ( <Tag key={id}>#{t}</Tag> ))} </HashTags> <Date>{date}</Date> </Box> </Container> ); };

---