javascript - Mapping multiple Array in React.js

Question

I am trying to achieve this :

While trying, I created an JavaScript Object(JSON like object) to access it. Here's the code:

const weekArray = [
  {
    weekMonth: 'February',
    weekDayofWeek: ['Thur', 'Thur', 'Thur', 'Thur'],
    weekDays: [ '04', '11', '18', '25'],
    weekStatus: 'Available +',
    className: 'February'
  },
  
  {
    weekMonth: 'March',
    weekDayofWeek: ['Thur', 'Thur', 'Thur', 'Thur'],
    weekDays: [ '04', '11', '18', '25'],
    weekStatus: 'Available +',
    className: 'March'
  },
  
  {
    weekMonth: 'April',
    weekDayofWeek: ['Thur', 'Thur', 'Thur', 'Thur', 'Thur'],
    weekDays: [ '01', '08', '15', '22', '29' ],
    weekStatus: 'Available +',
    className: 'April'
  },
  
  {
    weekMonth: 'May',
    weekDayofWeek: ['Thur', 'Thur', 'Thur', 'Thur'],
    weekDays: [ '06', '13', '20', '27' ],
    weekStatus: 'Available +',
    className: 'May'
  }
];

const WeekShow = () => {
  return (
    <React.Fragment>
    <div className="container">
      <div className="row">
      <div className="col-md-4 col-sm-4 col-xs-4">
      {weekArray.map((weekValues) => (
        <div key={weekValues.className}>
          <span>{weekValues.weekMonth}</span>
          <div className="card">
            <h5>{weekValues.weekDayofWeek}</h5>
            <h5>{weekValues.weekDays}</h5>
            <h5>{weekValues.weekStatus}</h5>
          </div>
        </div>
      ))}
      </div>
      </div>
     </div>
    </React.Fragment>
  );
}

ReactDOM.render(
  <WeekShow />,
  root
);

span {
  margin-right: 10px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

question from:https://stackoverflow.com/questions/65947720/mapping-multiple-array-in-react-js

Answer 1

I would like to suggest to change a shape of weekArray so it's easier to render and can handle different statuses per each week.

At fist dimension it will have months (as it is right now). I suggest for each month to have week array with data for each week.

const monthsArray = [
    {
        month: 'February',
        className: 'February',
        weeks: [
            {
                day: '04',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
            {
                day: '11',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
            {
                day: '18',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
            {
                day: '25',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
        ]
    },
    {
        month: 'March',
        className: 'March',
        weeks: [
            {
                day: '04',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
            {
                day: '11',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
            {
                day: '18',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
            {
                day: '25',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
        ]
    },
    {
        month: 'April',
        className: 'April',
        weeks: [
            {
                day: '01',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
            {
                day: '08',
                dayofWeek: 'Thur',
                status: 'Not Available',
            },
            {
                day: '15',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
            {
                day: '22',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
            {
                day: '28',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
        ]
    },
    {
        month: 'May',
        className: 'May',
        weeks: [
            {
                day: '06',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
            {
                day: '13',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
            {
                day: '20',
                dayofWeek: 'Thur',
                status: 'Not Available',
            },
            {
                day: '27',
                dayofWeek: 'Thur',
                status: 'Available +',
            },
        ]
    },
];

const WeekShow = () => {
    return (
        <React.Fragment>
            <div className="container">
                <div className="row">
                    <div className="col-md-4 col-sm-4 col-xs-4">
                        {monthsArray.map((monthValues) => (
                            <div key={monthValues.month}>
                                <span>{monthValues.month}</span>
                                {monthValues.weeks.map((weekValues) => (
                                    <div key={weekValues.day} className="card">
                                        <h5>{weekValues.dayofWeek}</h5>
                                        <h5>{weekValues.day}</h5>
                                        <h5>{weekValues.status}</h5>
                                    </div>
                                ))}
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </React.Fragment>
    );
}

ReactDOM.render(
    <WeekShow />,
    root
);

span {
    margin-right: 10px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>