CODEWITHSUNDEEP
javascriptreactjsjsx
LulzSec
LulzSec

Reputation: 39

TypeError: Data.filter is not a function in react js

I am passing prop from parent to child and then returning it. But I'm getting this filter is not a function error. If you help me to figure out the error it would be very helpful.

Filtering following array

Data = [{"e":"24hrMiniTicker","E":1657740208155,"s":"ETHBTC","c":"0.05494500","o":"0.05375100","h":"0.05507300","l":"0.05320200","v":"181144.04630000","q":"9804.01944501"},{"e":"24hrMiniTicker","E":1657740208676,"s":"BTCUSDT","c":"19768.97000000","o":"19431.27000000","h":"20128.39000000","l":"18910.94000000","v":"206075.46066000","q":"4019503677.20509370"}]

import React from 'react';
import { Box } from '@mui/material';
import Link from '@mui/joy/Link';
import Card from '@mui/joy/Card';
import Chip from '@mui/joy/Chip';
import Typography from '@mui/joy/Typography';


const CounterBox = ({Data}) => {


    return (
      <div>
        <Card
      variant="outlined"
      row
      sx={{
        maxWidth: '320px',
        minWidth: '100px',
        gap: 2,
        '&:hover': {
          boxShadow: 'md',
          borderColor: 'neutral.outlinedHoverBorder',
        },
      }}
    >
      <Box>
        <Box sx={{ ml: 0.5 }}>
          <Typography level="h2" fontSize="md" id="card-description" mb={0.5}>
            BTCUSDT
          </Typography>
          <Typography
            level="h3"
            fontSize="bg"
            aria-describedby="card-description"
            mb={1}
          >
            <Link
              overlay
              underline="none"
              href="#interactive-card"
              sx={{ color: 'black' }}
              >
              ${Data.filter(item => item === "BTCUSDT").map(item => item.c)}
            </Link>
          </Typography>
          <Chip
            variant="outlined"
            color="primary"
            size="sm"
            sx={{ pointerEvents: 'none' }}
          >
            Cool weather all day long
          </Chip>
        </Box>
      </Box>

      <Box>
        <Link
          overlay
          underline="none"
          href="#interactive-card"
          sx={{ color: 'green' }}
        >
          High "wait"
        </Link>
        <br />
        <br />

        <Typography level="h2" fontSize="md" id="card-description" mb={0.5}>
          Other
        </Typography>
      </Box>

      <Box>
        <Link
          overlay
          underline="none"
          href="#interactive-card"
          sx={{ color: 'red' }}
        >
          Low "wait"
        </Link>
      </Box>
    </Card>
    </div>
    );
}
export default CounterBox;

Upvotes: 1

Views: 8329

Answers (1)

Nukem
Nukem

Reputation: 68

The error you stated, "filter is not a function", happens when we call filter on a variable that is NOT of type array. If streamData is the variable in question, I would inspect it to make sure it's actually what you think it is (an array).

I don't see where you're using the destructured Data variable, nor do I see where you're defining streamData in the code you've posted. Is it possible that you meant to use Data.streamData.filter(...) or you're using the destructuring assignment incorrectly?

---- UPDATE ----

With the information included in your comment, I believe this is a destructuring issue.

Say you have the following props:

props = {
    Data: [your data],
    OtherKey: "Some Value"
}

When you destructure props as you have here, I think you're expecting {Data} to equal [your data], but{Data} will be equal to { Data: [your data]}, and therefore, your trying to filter an object, not an array.

You have a couple of options here, the simplest of which is probably to change:

const CounterBox = ({Data}) => {

to:

const CounterBox = ({Data: {Data}}) => {

Though, it's not the cleanest. However, if that quick fix works, then you should be able to clean it up as you see appropriate.

Upvotes: 4

Related Questions