I have the following code:

import React from 'react';

import ProjectsData from './projects.js';

class SingleProject extends React.Component {
    render () {
        return (
            <div className="info-project-wrapper">
                <h2>{this.props.title}</h2>
                <span className="show-for-large">{this.props.by}</span>
                <ul className="project-links show-for-large">
                    <li>{this.props.links}</li>
                </ul>
                <div className="info-project">
                    <p>VIEW NOW</p>
                </div>
            </div>
        )
    }
}

class SingleProjectWrapper extends React.Component {
    render () {
        var projects = [];
        this.props.projects.forEach(function(project, i){
            projects.push(<SingleProject title={project.title}  
                             by={project.by}
                             links={projects.links}
                             key={i} />);
        });
        return (
            <div className="single-project project-4">
                {projects}
            </div>
        )
    }
}

class Projects extends React.Component {
  render () {
    return (
        <section>
            <SingleProjectWrapper projects={ProjectsData} />
        </section>
    );
  }
}

export default Projects;

and "projectsData" es from:

var projects = [
    {
        title: 'title1',
        by: 'dfs',
        links: ['link-1', 'link-2', 'link-3']
    },
    {
        title: 'title2',
        by: 'sdfsd',
        links: ['link-1', 'link-2', 'link-3']
    },
    {
        title: 'title3',
        by: 'sfsf',
        links: ['link-1', 'link-2', 'link-3']
    },
    {
        title: 'title4',
        by: 'sdffd',
        links: ['link-1', 'link-2', 'link-3']
    }
];

export default projects;

most of the data gets displayed correctly apart from <li>{this.props.links}</li>. I only get an empty <li></li> as opposed to "link-1, link-2 and link-3" for each.

I have the following code:

import React from 'react';

import ProjectsData from './projects.js';

class SingleProject extends React.Component {
    render () {
        return (
            <div className="info-project-wrapper">
                <h2>{this.props.title}</h2>
                <span className="show-for-large">{this.props.by}</span>
                <ul className="project-links show-for-large">
                    <li>{this.props.links}</li>
                </ul>
                <div className="info-project">
                    <p>VIEW NOW</p>
                </div>
            </div>
        )
    }
}

class SingleProjectWrapper extends React.Component {
    render () {
        var projects = [];
        this.props.projects.forEach(function(project, i){
            projects.push(<SingleProject title={project.title}  
                             by={project.by}
                             links={projects.links}
                             key={i} />);
        });
        return (
            <div className="single-project project-4">
                {projects}
            </div>
        )
    }
}

class Projects extends React.Component {
  render () {
    return (
        <section>
            <SingleProjectWrapper projects={ProjectsData} />
        </section>
    );
  }
}

export default Projects;

and "projectsData" es from:

var projects = [
    {
        title: 'title1',
        by: 'dfs',
        links: ['link-1', 'link-2', 'link-3']
    },
    {
        title: 'title2',
        by: 'sdfsd',
        links: ['link-1', 'link-2', 'link-3']
    },
    {
        title: 'title3',
        by: 'sfsf',
        links: ['link-1', 'link-2', 'link-3']
    },
    {
        title: 'title4',
        by: 'sdffd',
        links: ['link-1', 'link-2', 'link-3']
    }
];

export default projects;

most of the data gets displayed correctly apart from <li>{this.props.links}</li>. I only get an empty <li></li> as opposed to "link-1, link-2 and link-3" for each.

• javascript
• reactjs

Share Improve this question Follow edited Sep 26, 2016 at 16:43 Brad Parks 72.5k7070 gold badges289289 silver badges367367 bronze badges asked Sep 26, 2016 at 16:18 AessandroAessandro 5,7832121 gold badges7373 silver badges146146 bronze badges 1

• 1 Not sure if this is your issue, but you have a misspelling in the links code: links={projects.links}. Should be links={project.links} – sma Commented Sep 26, 2016 at 16:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You'll need to iterate over the array of links, React doesn't do anything fancy with arrays.

So instead of;

<ul className="project-links show-for-large">
  <li>{this.props.links}</li>
</ul>

You'll need to do;

<ul className="project-links show-for-large">
    {this.props.links.map(i => <li>i</li>)}
</ul>