reactjs render rows dynamically

Question

I'm trying to create a component which will render 3 project descriptions in a row.

I have 2 components, one is to create a single project called Project and I have attached the code for another one below.

My main problems are

1: How to insert a <div class="row"> element before row starts
2: How to end a when row finishes

This code is working but all projects are getting rendered in one row.

var React = require('react'),
    projectData = require('./../../projects.json'),
    Project = require('./project'),
    projectLength = projectData.projects.length,
    itemsInRow = 3,
    clicked = 0; //Increment this number and rerender this cimponent on click and we are almost done 


var Projects = React.createClass({

    render: function() {
        var projectsDOM =   < div >
                            < div className = "jumbotron" >
                                < div className = "container" >
                                    < h1 > Projects < /h1> 
                                < /div> 
                            < /div>

                            < div className = "container" >
                                < div className = "row" > 
                                    {projectData.projects.reverse().map(function(project, i) {

                                        if(i < (clicked + 1) * itemsInRow) {
                                            return <Project id={project.id} />
                                        }
                                    })}

                                < /div> 
                                <hr/> 
                            < /div> 
                        < /div>

        return projectsDOM;
    }
});

module.exports = Projects;

enter image description here

jalooc · Accepted Answer · 2015-07-18 10:05:54Z

1

I'm afraid there's no declarative way to do that - you'll have to slice your projectData.projects array with Array.slice() an then for every newly created array output < div className = "row" > /*map the chunk of array like you already do*/</div>

answered Jul 18, 2015 at 10:05

jalooc

1,22614 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JS-JMS-WEB · Accepted Answer · 2015-07-18 13:33:29Z

jalooc's answer helped me to think in correct direction. So I handed over the responsibility of creating a new row to different component and passed an array of objects to render. Here is my final solution:

var React = require('react'),
    projectData = require('./../../projects.json'),
    ProjectsRow = require('./projects_row'),
    itemsInRow = 3,
    projects = projectData.projects.reverse();

    var Projects = React.createClass({

        getInitialState: function() {
            return { 
                rows: [projects.splice(0, itemsInRow)]
            }
        },

        loadMoreProjects: function(e) {
            e.preventDefault();
            var addRow = this.state.rows;

            if(projects.length) {
                addRow.push(projects.splice(0, itemsInRow));
                this.setState({rows: addRow});  
            }
        },

        render: function() {

            return (
                < div >
                    < div className = "jumbotron" >
                        < div className = "container" >
                            < h1 > Projects < /h1> 
                        < /div> 
                    < /div>

                    < div className = "container" >

                        {this.state.rows.map(function(row, i) {
                            return <ProjectsRow row={row} key={i} />
                        }.bind(this))}

                    < /div> 

                    < div className = "container" > 
                        <a className="btn btn-default" 
                            onClick = {this.loadMoreProjects}
                            role="button" > Load More </a>
                    </div>
                < /div>
            );  
        }
    });

    module.exports = Projects;

Collectives™ on Stack Overflow

reactjs render rows dynamically

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related