React: Dynamically Rendering Nested Images

Question

I'm a newbie to React; and trying to render an assortment of images dynamically. I can't figure out how to render all of the nested images from data.pageimg. I have tried reformatting the file, mapping the images, and nothing seems to work. The paths are correct and I'm stumped!

WorkPage.js:
import React from 'react';
import './Work.css';
import '../App.css';
import data from './data';
import { Link } from "react-router-dom";
import FontAwesome from 'react-fontawesome';
import { Col } from 'reactstrap';
import { Nav, NavItem } from "react-bootstrap";
import Grid from 'react-bootstrap/lib/Grid';


const WorkPage = (props) => {

    const workpage = data.get(props.match.params.link)
    if (!workpage) {
    return <div>Sorry, but this work page does not exist!</div>
    }



    return (
        <div className="App">
            <FontAwesome name="arrow-left" /><Link className="link" to='/work'> Back</Link>

            <div className="col-md-12 text-center">
              <h1>{workpage.name}: {workpage.type}</h1>
            </div>

            <div className="col-md-12">
                <h3>PROJECT DESCRIPTION</h3>
                <p className="paragraph">{workpage.project}</p>
                <h3>CHALLENGES</h3>
                <p className="paragraph">{workpage.challenges}</p>
                <h3>TOOLS</h3>
                <p className="paragraph">{workpage.tools}</p>
                <h3>FINAL RESULT</h3>
                <p className="paragraph">{workpage.result}</p>
            </div>    
            <div className="col-md-12" >
              <Grid>    
                <Col md="6">
                  <img className="img-responsive" alt="images" src={workpage.pageimg}/>
                </Col> 
             </Grid>    
            </div>
            <div className="col-md-12">
                <Nav justified>
                    <NavItem
                     eventKey={4}
                     href={`${workpage.site}`} target="_blank">
                     <h3>Link to {workpage.name}'s Website</h3>
                    </NavItem>
                </Nav>
            </div>    
        </div>
      )
    }

export default WorkPage;

data.js:
const data = {
  workcards: [
{
    img: "https://res.cloudinary.com/dmcdekker/image/upload/c_scale,h_432,w_648/v1504041011/jim_card2_dkl0op.png",
    name: "Some Name",
    type: "Web Development",
    link: "somename",
    number: 8,
    pageimg: [
        "img1",
        "img2",
        "img3",
        "img4"
        ]
},

{
    img: "https://res.cloudinary.com/dmcdekker/image/upload/c_scale,h_432,w_648/v1492138087/Screen_Shot_2017-04-13_at_3.45.21_PM_qpr2vu.png",
    name: "Another Name",
    type: "Product Dev/UX/UI Design",
    link: "anothername",
    number: 7,
    result: "Something about the result",
    pageimg: [
        "img1",
        "img2",
        "img3"
        ]
}

Any help or advice would be greatly appreciated! Thanks in advance.

Any errors in the console?

Dekel
– Dekel

2017-11-04 01:36:04 +00:00
Commented Nov 4, 2017 at 1:36 — Dekel
– Dekel, Commented Nov 4, 2017 at 1:36
@Dekel: No errors.

dmcdekker
– dmcdekker

2017-11-04 18:06:41 +00:00
Commented Nov 4, 2017 at 18:06 — dmcdekker
– dmcdekker, Commented Nov 4, 2017 at 18:06

Rick Jolly · Accepted Answer · 2017-11-04 03:42:38Z

1

Something like:

    const images = workpage.pageimg.map(img =>
        <img className="img-responsive" alt="images" src={img} />
    );

    return (
        <div>{images}</div>
    )

answered Nov 4, 2017 at 3:42

Rick Jolly

3,0192 gold badges26 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

React: Dynamically Rendering Nested Images

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related