My map function is,

 days.map((val)=>val)

when I consoling days prop it gives me,

  [Array(7)]
  0: (7) ['', '', '', 'Wednesday', '', '', 'Saturday']
  length: 1

Hence days is an array,so why this error occures?

Below is the image of console.log() [1]: https://i.stack.imgur.com/XRQrr.png

This is the component in which I am using the days Prop..

import * as React from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import {
    Card,
    CardMedia,
    CardActions,
    Icon,
    Grid,
    Radio,
    Button,
    RadioGroup,
    FormControlLabel,
    Select as MuiSelect,
    MenuItem,
    FormControl,
    InputLabel,
    IconButton,
    CircularProgress,
    Divider,
    Snackbar, Alert, Typography
} from '@mui/material';

function SpecialPriceTable({
    tableData,
    days
}) {
    return (

        <TableContainer component={Paper}>
            <Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
                <TableHead>
                    <TableRow>
                        <TableCell align="right">Start Date</TableCell>
                        <TableCell align="right">End Date</TableCell>
                        <TableCell align="right">Recurrence</TableCell>
                        <TableCell align="right">Price Type</TableCell>
                        <TableCell sx={{ pr: 3 }} align="right">Pice</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {tableData.map((data, index) => (
                        <TableRow
                            key={index}
                            sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                        >
                            <TableCell align="right">
                                {data.start_date}
                            </TableCell>

                            <TableCell align="right">
                                {data.end_date}
                            </TableCell>

                            {/* <TableCell align="right">
                                {data.recurrenceType === 1 ? 'All day' : data.recurrenceType === 2 ? 'Weekend(Every Saturday and Sunday)' :
                                    data.recurrenceType === 3 ? days.map((item) => item.join(' ')) : ''}
                            </TableCell> */}

                            {console.log(days[0].map(val=>val))}

                            <TableCell align="right">
                                {data.priceType === 0 ? 'Whole' : data.priceType === 1 ? 'Per Person' : data.priceType === 2 ? 'Per Hours' : ''}
                            </TableCell>

                            <TableCell sx={{ pr: 3 }} align="right">
                                {data.price}
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </TableContainer>

    )
}

export default SpecialPriceTable

Thanks,any suggestion accepted..

CodePudding user response：

I cannot know how your days property is initialized based on the code snippet. Maybe somewhere is it initialized as an object not as an array and then somehow it is converted to array.

Please check the initialization of your days property and change that. You can also add this check Array.isArray(days)

<TableCell align="right">
 {data.recurrenceType === 1 ? 'All day' : data.recurrenceType === 2 ? 'Weekend(Every Saturday and Sunday)' :
 data.recurrenceType === 3 ? (Array.isArray(days) ? days.map((item) => item.join(' ')) : '-') : ''}
                            </TableCell>