Mapping multiple Array in React.js

I am trying to achieve this :
To achieve

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!

92 thoughts on “Mapping multiple Array in React.js”

Leave a Comment