Alex Alex - 2 months ago 6
Javascript Question

React.js get data from js array

I have the follwoing 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" comes 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.

Answer

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>