在反应中渲染地图的大小

Question

I have two maps that I want to use their length as an integer for a component in react. the code looks something like this:

function Test() {
  const classes = useStyles();
  const [spacing, setSpacing] = React.useState(2);
  // FETCH REQUEST DATABASE ITEMS
  const [items, setItems] = useState([]);
  useEffect(() => {
    fetch("/test")
      .then(res => res.json())
      .then(items => setItems(items));
  }, []);
  // ASSIGN ITEMS TO MAPPED GRID
  return (
    <Grid
      container
      direction="row"
      justify="space-around"
      alignItems="flex-start"
      spacing={2}
    >
      {items.map(x => {
        return (
          <Grid item sm key={`key${x._id}`}>
            <SmallCard
              key={x._id}

              // MAP I WANT TO TURN INTO INTEGER BELLOW

              mappedItemCount = {x.map.size}

              // ^ ^ ^ ^ ^ ^ THIS PART HERE IN PARTICULAR


            />
          </Grid>
        );
      })}
    </Grid>
  );
}

For some reason this does not seem to turn it into an integer and still lists as NAN. What am I doing wrong?

Answer 1

my item was an object not a map due to the way its being rendered. so the correct syntax should really be the following:

mappedItemCount = {Object.keys(x.map.size).length}

Sacred texts can be found here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys