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](http://stackoverflow.com/questions/22876978/loop-inside-react-jsx) — Chris, May 17 '17 at 11:26

Shubham Khatri · Accepted Answer · 2017-05-17T12:01:29.023

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 '17 at 12:01

answered May 17 '17 at 11:44

Shubham Khatri

270,417
55
406
400

I am getting Cannot read property 'map' of undefined(…) while trying with your code – priya May 17 '17 at 11:48
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 – Shubham Khatri May 17 '17 at 11:49
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 – priya May 17 '17 at 11:50
Updated the answer, make use of rows – Shubham Khatri May 17 '17 at 11:52
I have updated my answer,still getting same issue map is undefined. – priya May 17 '17 at 11:58
please help me with solution as i can't find my mistake – priya May 17 '17 at 11:59
The problem the row data ,i got as objects of objects and i convert this to array of objects and i tried with your code.It worked great!!!!!!!!.Thanks – priya May 18 '17 at 06:33

score 0 · Answer 2 · answered May 17 '17 at 11:32

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 '17 at 11:32

Vikram Saini

2,713
1
16
33

Its not a todo, when you are answering you should modify your answer according to the OP need or point to the appropriate link – Shubham Khatri May 17 '17 at 11:45

Iterating array of objects in reactjs

2 Answers2