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
    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é
    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
    Merci pour ta réponse gwyohm

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

###raw>template_hook.ano_emploi###