如何从React JS中父组件上的对象循环子组件中的项目

Question

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.

Answer 1

Parent:

import React from 'react';
import './projects.css';
import { Project } from '../projects/project/Project';

export class Projects extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            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">
                {this.state.projects.map(project => (
                    <Project key={project.name} project={project}/>
                ))}
            </section>
        );
    }
};

Child:

import React from 'react';
import './project.css';

export class Project extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        let project = this.props.project; // Use this in jsx
        ...
    }
};

Answer 2

You need to pass your parent data as props

lets say your parent class is :

import React from 'react';
import './projects.css';
import { Project } from '../projects/project/Project';

export class Projects extends React.Component {
constructor(props) {
    super(props);
    // use this.state to initiate your state, keep data in state you can use variable not recommended
    this.state = {
    data : [
        {
            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 data={this.state.data}/>
        </section>
    );
}
};

and your child component should be:

import React from 'react';
import './project.css';

export class Project extends React.Component {
constructor(props) {
    super(props);
}

render() {
    return (
        <div>
       {this.props.data.map((item,i)=>
        <div className="container work-item" key={i}>
            <div className="row">
                <div className="col-lg-5">
                    <img src={item.img}/>
                </div>
                <div className="col-lg-5 image-box">
                    <h5>{item.name}</h5>
                    <p>{item.desc}</p>
                </div>
            </div>
        </div>
    );
}
};

See the Live demo here : https://codesandbox.io/s/mqj6j0o2y9 ,

Have a good day