React - mapping through array of images

Question

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.

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 (
            <Grid className="text-center" id="listOfProjects">
                <PageHeader className="projects-header">My Projects</PageHeader>
                {projects.map(e => 
                    <ListOfProjects
                    photo={e.photo}
                    text={e.text}
                    />
                )}
            </Grid>
        );
    }
}

export default Projects;

new Component

class ListOfProjects extends Component {
    render() {
        return (
            <Row className="show-grid text-center projects-list">
                <Col xs={1} sm={1} className="projects">
                    <Image src={this.props.photo} thumbnail responsive/>
                    <p>{this.props.text}</p>
                </Col>
            </Row>
        );
    }
}

export default ListOfProjects;

UPDATED:

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

const projects = [{
        photo: {firstProjectPhoto},
        text:"first project"
    },
    {
        photo: {secondProjectPhoto},
        text:"second project"
    },
    {
        photo: {thirdProjectPhoto},
        text:"third project"
    }
]


           <Grid className="text-center" id="listOfProjects">
                <PageHeader className="projects-header">
My Projects    </PageHeader> 
                {projects.map((e,i) =>
                    <ListOfProjects
                    photo={e.photo}
                    text={e.text}
                    key={i}
                    />
                )}
            </Grid>

UPDATED

I should be without {} Now works perfectly fine:) thank you everyone for help

Answer 1

The structure of the projects object is not the one you expect. You want

projects = [
  {
    photo: projectPhoto,
    text: projectText
  },
  ...
]

but you have

projects = [
  { photo: [...] },
  { text: [...] }
]

You also forgot to add a key to each item rendered in the loop:

{projects.map((e, idx) => 
  <ListOfProjects
    photo={e.photo}
    text={e.text}
    key={idx} // <-- here
    />
)}