Iterating array of objects in reactjs

Question

I am newbie to reactjs,as i want to know how to render the list of items in table.

My sample array of objects is:

[
{description:"test leave"
end_date:"2017-05-16"
id:1
name:"new year"
start_date:"2017-05-16"},

{description:"Diwali eve"
end_date:"2017-10-22"
id:2
name:"diwali"
start_date:"2017-10-22"}
]

My code is:

import React from 'react';
import { Router, Link , Route, Switch ,browserHistory } from 'react-router';
import {holidaydetails} from '../actions/index.jsx'
import {holidaydetailreducer} from '../reducers/holidaydetails.jsx'
import thunk from 'redux-thunk';
import ReduxPromise from 'redux-promise';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';


class HolidaysList extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            HolidayList: []
        };
    }

    componentDidMount()
    {
            this.props.holidaydetails();
            this.setState({HolidayList:this.props.holidaydetails()})

    }


    render(){
            const rows = this.props.HolidayList.holidaylist_data;
            console.log(rows,'rows implementation!!!!!');

        return(
            <div className="container">
                <div className="row">
                    <div className="margin">
                        <div className="col-md-12">
                            <div className="main_content">
                                <div className="row">
                                    <div className="col-md-12">
                                        <div className="row">
                                            <div className="col-sm-12" data-offset="0">
                                                <div className="panel panel-info">
                                                    <div className="panel-heading">
                                                        <div className="panel-title">
                                                            <strong>List of All Events</strong>
                                                        </div>
                                                    </div>
                                                    <table className="table table-bordered table-hover" id="dataTables-example">
                                                        <thead>
                                                            <tr>
                                                                <th>SL.NO</th>
                                                                <th className="col-sm-3">Event Name</th>
                                                                <th className="col-sm-1">Start Date</th>
                                                                <th className="col-sm-1">End Date</th>
                                                                <th>Description</th>
                                                                <th className="col-sm-1">Action</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>

                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

function mapStateToProps(state,props) {
    console.log(state,'state in holidaylist')
  return {
    HolidayList: state
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    holidaydetails: holidaydetails}, dispatch);
}



export default connect(mapStateToProps, mapDispatchToProps)(HolidaysList);

In the above code,I have rows object which contain all objects list in array.

Thanks in advance,
any help is appreciated.

Possible duplicate of loop inside React JSX

Chris
– Chris

2017-05-17 11:26:32 +00:00
Commented May 17, 2017 at 11:26 — Chris
– Chris, Commented May 17, 2017 at 11:26
@chris it is not working.Thanks for ur help

priya
– priya

2017-05-17 11:31:27 +00:00
Commented May 17, 2017 at 11:31 — priya
– priya, Commented May 17, 2017 at 11:31

Shubham Khatri · Accepted Answer · 2017-05-17 12:01:29Z

1

You need to map over your data like

<tbody>

{rows && rows.map((holiday) => {
     return <tr key={holiday.id}>
                <td>{holiday.id}</td>
                <td>{holiday.name}</td>
                <td>{holiday.start_date}</td>
                <td>{holiday.end_date}</td>
                <td>{holiday.description}</td>
                <td><button onClick={() => this.someAction(param)}>Action</button></td>
            </tr>
})}
</tbody>

edited May 17, 2017 at 12:01

answered May 17, 2017 at 11:44

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

7 Comments

priya Over a year ago

I am getting Cannot read property 'map' of undefined(…) while trying with your code

Shubham Khatri Over a year ago

priya, can you tell which is the data variable, is it from this.state.HolidayList, if not you can use the appropriate data variable there

priya Over a year ago

I am getting data in this.props.HolidayList.holidaylist_data inside my component. as i got in console inside component by trying const row =this.props.HolidayList.holidaylist_data

Shubham Khatri Over a year ago

Updated the answer, make use of rows

priya Over a year ago

I have updated my answer,still getting same issue map is undefined.

|

Vikram Saini · Accepted Answer · 2017-05-17 11:32:42Z

0

Try this

 render() {

          return (
      <table>
           <tbody>{this.state.todos.map((todo, i) => <Todo key={i} todos= {todo} />)}</tbody>
         </table>
     );
       }

Todo Component

class Todo extends React.Component {

   render() {

      return (
            <tr>
            <td>{this.props.todos.id}</td>
            <td>{this.props.todos.name}</td>
            <td>{this.props.todos.company}</td>
         </tr>
      );
   }
}

export default Todo;

answered May 17, 2017 at 11:32

Vikram Saini

2,7521 gold badge21 silver badges33 bronze badges

1 Comment

Shubham Khatri Over a year ago

Its not a todo, when you are answering you should modify your answer according to the OP need or point to the appropriate link

Collectives™ on Stack Overflow

Iterating array of objects in reactjs

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related