How to fix days.map is not a function error

Question

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

sometimes, `console.log` can display a value that's not necessarily the value at the time of logging the variable. — technophyle, Oct 05 '22 at 07:09
It looks like your days array may be an array with only a single value, which itself is an array. Could you try doing `days[0].map(val => val)`? — mjwils, Oct 05 '22 at 07:20
this though doesnt answer the `days.map is not a function` error. it should run even for this one element. so there is sth else inside the code. — Apostolos, Oct 05 '22 at 07:22
I have tried this days[0].map(val => val),Bu not working @mjwils — Noob_Mern_Dev, Oct 05 '22 at 07:26
are you sure `days` is always an array throughout your state? this is the only thing i can think of. — Apostolos, Oct 05 '22 at 07:32

score 1 · Accepted Answer · answered Oct 05 '22 at 07:30

1

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>

answered Oct 05 '22 at 07:30

Apostolos

10,033
5
24
39

plz check this and suggest any solution: https://stackoverflow.com/questions/73947682/how-to-check-whether-the-state-has-no-empty-value-in-react-app/73947803#73947803 – Noob_Mern_Dev Oct 05 '22 at 07:52
answer given there is ok. what is the problem? – Apostolos Oct 05 '22 at 08:04
I want to validate the state,wheather the objects having any null value or not.So that I perform submit action. – Noob_Mern_Dev Oct 05 '22 at 09:00
yes i saw that, but the answer is OK. it does what you need. – Apostolos Oct 05 '22 at 09:01
I have already tried that same but not working. – Noob_Mern_Dev Oct 05 '22 at 09:06
Is there any other way to validate. – Noob_Mern_Dev Oct 05 '22 at 09:06
so `validate` function should return `true` if all are OK? non zero, non empty and non empty array? – Apostolos Oct 05 '22 at 09:07
yes,validate function will return true if all are ok – Noob_Mern_Dev Oct 05 '22 at 09:13
so i guess you need this. `const validate=Object.values(state).every((item)=>(item!==0 && item!=='' && JSON.stringify(item)!=='[]'))` if yes, let me know so i can post my answer! – Apostolos Oct 05 '22 at 09:15
https://prnt.sc/iosaCLE1yMqZ , https://prnt.sc/KBtNYZckCrmh .Check these Images.Not working,I mean when there is no value inside the state and I click on save button and execute that function it goes inside else. – Noob_Mern_Dev Oct 05 '22 at 09:38
https://prnt.sc/i9nQmySwzJr3 , https://prnt.sc/A1MsPmNZJgSG – Noob_Mern_Dev Oct 05 '22 at 09:45
validate returns true if all have data. you have the opposite here. you have negation. remove `!` – Apostolos Oct 05 '22 at 09:56
Yes,but the thing is, some objects of the the state are dynamic so your solution returns false always till all the objects of the state are having their values.https://prnt.sc/cLeXZVuEW5TG ,https://prnt.sc/umM4bELm63nO .....look at these screenshots – Noob_Mern_Dev Oct 06 '22 at 10:48

How to fix days.map is not a function error

1 Answers1