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 MyArr

Quiero 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 Body

entonces 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 ShowFontAwesome

finalmente, registra este error en la consola ** no se pudo encontrar el icono {prefix: 'fas', iconName: 'FontAwesome.faUser'} **