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

When you say, "I should be without {}", can you clarify what exactly you mean? — Rylan Schaeffer
– Rylan Schaeffer, Commented Jun 3, 2022 at 18:21

Baboo · Accepted Answer · 2018-08-25 08:50:40Z

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

edited Aug 25, 2018 at 8:50

answered Aug 25, 2018 at 8:45

Baboo

4,3184 gold badges24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Taffarel Xavier Over a year ago

There is a mistake in this approach. If the projects are empty, react will display an error on the screen. What would be the best approach in this case?

vitomadio · Accepted Answer · 2018-08-25 08:45:59Z

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

KrishnaSingh · Accepted Answer · 2018-08-25 08:45:54Z

1

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'}
    ];

answered Aug 25, 2018 at 8:45

KrishnaSingh

7461 gold badge7 silver badges13 bronze badges

Comments

Hemadri Dasari · Accepted Answer · 2018-08-25 09:05:18Z

1

Considering your JSON data structure following is one way to resolve your issue. But the json data you provided is not recommented. 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;

edited Aug 25, 2018 at 9:05

answered Aug 25, 2018 at 8:47

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

Collectives™ on Stack Overflow

React - mapping through array of images

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related