87
rated 0 times
[
93]
[
6]
/ answers: 1 / hits: 6282
/ 8 Years ago, mon, september 26, 2016, 12:00:00
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 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.
More From » reactjs
