Mapping multiple Array in React.js

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!

https://stackoverflow.com/questions/65947720/mapping-multiple-array-in-react-js January 29, 2021 at 09:48AM