Mapping multiple Array in React

问题

I am trying to achieve this :

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

export default [
    {
        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'
    }
];

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.

How I rendered it:

import Col from "react-bootstrap/Col";
import Card from 'react-bootstrap/Card';

const Weekitem = ({
    weekMonth, weekDayofWeek, weekDays, weekStatus, className
}) => {
    return ( 
        <>
            <Col lg={3} md={3} sm={6} xs={12}>
                <h3> {weekMonth} </h3>
                    {weekDays.map((weekday) => (
                        <Card>
                            <h1> {weekday} </h1>
                            {weekDayofWeek}
                            {weekStatus}
                        </Card>
                    ))}
            </Col>
        </>
     );
}
 
export default Weekitem;

Then, I got this:

What could be error? Please, check. But h1 worked as expected. Why other? Thanks.

来源：https://stackoverflow.com/questions/65936442/mapping-multiple-array-in-react

标签

javascript

reactjs

ecmascript-6

react-bootstrap