I have a view that shows project items. Project information is in a data object in Projects (parent) component.
Parent component:
import React from 'react';
import './projects.css';
import { Project } from '../projects/project/Project';
export class Projects extends React.Component {
constructor(props) {
super(props);
var projects = [
{
name: "Project 01",
desc: "A paragraph, from the Greek paragraphos, to write beside or written beside, is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences.",
img: "http://wenuka.com/img/back.jpg"
},
{
name: "Project 02",
desc: "A paragraph, from the Greek paragraphos, to write beside or written beside, is a self-contained unit of a discourse in writing dealing with a particular point or idea.",
img: "http://wenuka.com/img/back.jpg"
},
{
name: "Project 03",
desc: "A paragraph, from the Greek paragraphos, to write beside or written beside, is a self-contained unit of a discourse in writing one or more sentences.",
img: "http://wenuka.com/img/back.jpg"
}
]
}
render() {
return (
<section className="projects bg-ash">
<Project/>
</section>
);
}
};
HTML code for a project item is in the Project (child) component as below.
Child component:
import React from 'react';
import './project.css';
export class Project extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="container work-item">
<div className="row">
<div className="col-lg-5">
<img src="http://wingman.mediumra.re/assets/img/graphic-product-paydar.jpg"/>
</div>
<div className="col-lg-5 image-box">
<h5>Project Name</h5>
<p>To write beside or written beside, is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences.</p>
</div>
</div>
</div>
);
}
};
I need to show each element as a project in data object using child component.