title: React - mapping through array of images
body: <p>I have created object with arrays inside it, text and images, and I wish to map through this to render new component, is it possible to map through images like that? Because my new component doesn't detect any picture when I pass it through props and don't know if I do something wrong or it is just not possible that way.</p>
  
  <pre><code>import firstProjectPhoto from '../img/picOne.png';
  import secondProjectPhoto from '../img/picTwo.png';
  import thirdProjectPhoto from '../img/picThree.png';
  import ListOfProjects from "./subcomponents/ListOfProjects";
  
  
  const projects = [{
      photo:[{firstProjectPhoto},{secondProjectPhoto},{thirdProjectPhoto}],
      },
      {
      text:["Project number one", "Project number two", "Project number 3"],
      }];
  
  
  
  class Projects extends Component {
      render() {
          return (
              &lt;Grid className="text-center" id="listOfProjects"&gt;
                  &lt;PageHeader className="projects-header"&gt;My Projects&lt;/PageHeader&gt;
                  {projects.map(e =&gt; 
                      &lt;ListOfProjects
                      photo={e.photo}
                      text={e.text}
                      /&gt;
                  )}
              &lt;/Grid&gt;
          );
      }
  }
  
  export default Projects;
  </code></pre>
  
  <p>new Component</p>
  
  <pre><code>class ListOfProjects extends Component {
      render() {
          return (
              &lt;Row className="show-grid text-center projects-list"&gt;
                  &lt;Col xs={1} sm={1} className="projects"&gt;
                      &lt;Image src={this.props.photo} thumbnail responsive/&gt;
                      &lt;p&gt;{this.props.text}&lt;/p&gt;
                  &lt;/Col&gt;
              &lt;/Row&gt;
          );
      }
  }
  
  export default ListOfProjects;
  </code></pre>
  
  <p>UPDATED:</p>
  
  <p>Actually there is some progress, thank you guys:) the problem was in structure of const project, however still it shows img src as a [object Object] instead of normal picture</p>
  
  <pre><code>const projects = [{
          photo: {firstProjectPhoto},
          text:"first project"
      },
      {
          photo: {secondProjectPhoto},
          text:"second project"
      },
      {
          photo: {thirdProjectPhoto},
          text:"third project"
      }
  ]
  
  
             &lt;Grid className="text-center" id="listOfProjects"&gt;
                  &lt;PageHeader className="projects-header"&gt;
  My Projects    &lt;/PageHeader&gt; 
                  {projects.map((e,i) =&gt;
                      &lt;ListOfProjects
                      photo={e.photo}
                      text={e.text}
                      key={i}
                      /&gt;
                  )}
              &lt;/Grid&gt;
  </code></pre>
  
  <p>UPDATED</p>
  
  <p>I should be without {}
  Now works perfectly fine:) thank you everyone for help</p>