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>

Now, I'm trying to access each data in object file to get the desired result showed in the image but it's not working well. Don't mind the styles, I just want to focus on the main objective. What could be the error? Please check and help!

I've noticed that the data structure that you are using is not able to handle different status for different weeks. Is it okay to reshape it? It will also change the way of rendering (which will become easier) — Vitalii
– Vitalii, Commented Jan 29, 2021 at 2:00

Vitalii · Accepted Answer · 2021-01-29 02:34:00Z

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>

Nguyễn Văn Phong · Accepted Answer · 2021-01-29 02:11:33Z

You should loop .weekDayofWeek once again :)

const renderWeekDayofWeek = ({weekDayofWeek, weekDays, weekStatus}) => {
  return weekDayofWeek.map((r, index) => (
    <div className="card" key={index}>
    <h5>{r}</h5>
    <h5>{weekDays[index]}</h5>
    <h5>{weekStatus}</h5>
  </div>
));
}

Call the renderWeekDayofWeek() like below:

 {weekArray.map((weekValues) => (
      <div key={weekValues.className}>
        <span>{weekValues.weekMonth}</span>
        {renderWeekDayofWeek(weekValues)}
      </div>
    ))}

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 renderWeekDayofWeek = ({weekDayofWeek, weekDays, weekStatus}) => {
    return weekDayofWeek.map((r, index) => (
      <div className="card" key={index}>
      <h5>{r}</h5>
      <h5>{weekDays[index]}</h5>
      <h5>{weekStatus}</h5>
    </div>
    ));
  }

  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>
            {renderWeekDayofWeek(weekValues)}
          </div>
        ))}
        </div>
        </div>
       </div>
      </React.Fragment>
    );
  }
  

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

<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>

Collectives™ on Stack Overflow

Mapping multiple Array in React.js

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