Soy muy nuevo en RectJs, por lo que esta puede ser una pregunta para principiantes. Sin embargo, tengo una serie de objetos llamados MyArr como este:
const MyArr =[ {picture:'faUser' , text:'something'}, {picture:'faUser' , text:'something'} ] export default MyArrQuiero usar el valor de "imagen" en otro componente para declarar qué ícono de #FontAwesome debe mostrarse. así que hice otro componente en el que paso ese Array of Objects como un valor de accesorios al destino, así
import React, { Component } from 'react' import MyArr from './MyArr' import ShowFontAwesome from './ShowFontAwesome' class Body extends Component { render() { return( <div> <ShowFontAwesome myValue={MyArr} /> </div> ) }} export default Bodyentonces el componente llamado "ShowFontAwesome" es donde voy a mostrar el resultado; este es el codigo del componente
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import * as FontAwesome from '@fortawesome/free-solid-svg-icons'; import React, { Component } from 'react' class ShowFontAwesome extends Component { constructor(props){ super(props);} render() { return ( <div> {this.props.myValue.map( (myValues, index)=>{ return( <div> <FontAwesomeIcon icon={`FontAwesome.${myValues.picture}`} /> </div> )}) </div> )}} export default ShowFontAwesomefinalmente, registra este error en la consola ** no se pudo encontrar el icono {prefix: 'fas', iconName: 'FontAwesome.faUser'} **
Actualizar:
primero agregue esto a su componente:
import {fas} from '@fortawesome/free-solid-svg-icons' import { library } from "@fortawesome/fontawesome-svg-core"; library.add(fas);y cambie el valor de la imagen de "faUser" a solo "usuario", por lo que su matriz será así:
const MyArr =[ {picture:'user' , text:'something'}, {picture:'user' , text:'something'} ] export default MyArry luego usarlo así:
<FontAwesomeIcon icon={myValues.picture} />