I have created object with arrays inside it, text and images, and I wish to map through this to render new ponent, is it possible to map through images like that? Because my new ponent 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 "./subponents/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

I have created object with arrays inside it, text and images, and I wish to map through this to render new ponent, is it possible to map through images like that? Because my new ponent 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 "./subponents/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

• javascript
• arrays
• reactjs

• Inlcude code of the ListOfProjects. – Sagar Commented Aug 25, 2018 at 8:37
• When you say, "I should be without {}", can you clarify what exactly you mean? – Rylan Schaeffer Commented Jun 3, 2022 at 18:21

4 Answers 4

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
    />
)}

Assume that you want to pass a dummy db code, should do it as follows, even if it is not ideal but for testing purpose:

class Projects extends Component {

const projects = [
    {
        photo:firstProjectPhoto,
        text: "Project number one"
    },
    {
        photo:secondProjectPhoto,
        text: "Project number two"
    },
    {
        photo:thirdProjectPhoto,
        text: "Project number three"
    },
];

render() {
    return (
        <Grid className="text-center" id="listOfProjects">
            <PageHeader className="projects-header">My Projects</PageHeader>
            {projects.map(e => 
                <ListOfProjects
                projects={projects}
                />
            )}
        </Grid>
    );
}
}

The problem is the data structure of your projects. Its defined as an array of objects, where key is in array. Try to adjust your project structure.

const projects = [{
    photo:'firstProjectPhoto':text:'Project number one'
    },
   {photo:'secondProjectPhoto':text:'Project number two'},
    {photo:'thirdProjectPhoto',:text:'Project number three'}
    ];

Considering your JSON data structure following is one way to resolve your issue. But the json data you provided is not remented. Every image should have its name in same object.

class ListOfProjects extends Component {
    render() {
    let images = [];
    const { photo, text } = this.props;
    photo.map((p, i) => {
      images.push(<Col xs={1} sm={1} className="projects">);
      images.push(<div key={i}>
      <Image src={p} thumbnail responsive/>
      <p>{text[i]}</p></div>
      );
      images.push(</Col>);
    });
        return (
            <Row className="show-grid text-center projects-list">
               {images} 
            </Row>
        );
    }
}

export default ListOfProjects;