Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

React Discussion :

Render icon from 'react-icons/fa' with map


Sujet :

React

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Autre
    Inscrit en
    janvier 2017
    Messages
    15
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : janvier 2017
    Messages : 15
    Points : 25
    Points
    25
    Par défaut Render icon from 'react-icons/fa' with map
    Hello, bonjour

    Quelqu'un peut-il éclairer ma lanterne ?




    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    {name:'Livre', icon:'<FaBookOpen />'}
    Comment puis-je rendre l'icone ?
    Sans utiliser map, l'icone est correctement rendue.
    J'ai essayé différentes façons dont la plus simple qui suit, mais je me retrouve avec une string , quelque chose m'échappe

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
            <ul>
              {
                this.props.modules.map(module => {
                  return (
                    <li key={module.name}>{module.icon}</li>
                  )
                })
              }
          </ul>
    Merci

  2. #2
    Membre éprouvé
    Avatar de gwyohm
    Homme Profil pro
    Ingénieur avant-vente
    Inscrit en
    octobre 2007
    Messages
    804
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur avant-vente

    Informations forums :
    Inscription : octobre 2007
    Messages : 804
    Points : 1 120
    Points
    1 120
    Par défaut
    Salut,

    Ca ne peut pas marcher comme ca, dans ton exemple, icon n'est qu'une String. Il faut que tu fasses autrement. Par exemple:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    {name:'Livre', icon: () => (<FaBookOpen />)}
    puis
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <ul>
              {
                this.props.modules.map(module => {
                  return (
                    <li key={module.name}>{module.icon()}</li>
                  )
                })
              }
          </ul>
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  3. #3
    Nouveau membre du Club
    Homme Profil pro
    Autre
    Inscrit en
    janvier 2017
    Messages
    15
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : janvier 2017
    Messages : 15
    Points : 25
    Points
    25
    Par défaut
    Merci pour ta réponse gwyohm

    J'avais finalement trouvé une méthode fonctionnelle, mais la tienne est plus pro !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. PJC : A button with label and icon
    Par lido dans le forum Forms
    Réponses: 14
    Dernier message: 01/02/2010, 11h30
  2. icone google map et bdd mysql
    Par chris45 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 19/11/2008, 22h08
  3. [DEV] Confusion icones fichiers et icones bundle/app
    Par ttone dans le forum Développement OS X
    Réponses: 0
    Dernier message: 05/06/2008, 22h16
  4. [Icone] Modifier l'icone de ma base de données
    Par snoopy69 dans le forum Access
    Réponses: 2
    Dernier message: 19/07/2006, 10h04

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo