Question 298282 in Reactjs Question posted in
The new location for the React Documentation can be found here.

ReactJS Uncaught TypeError: Cannot read properties of undefined (reading 'length')

I am making a striking application. I use json-server(fake api) as backend. So when i wanted to add students -list, i use this code: {User. length === 0 ? " " : alert(‘Checking’)} so that I could check if it is working or not. Hovewer, I am getting an error. But on the other components, everything is fine. Idk what to do. pls help. Here is my code:

import * as React from "react";
import PropTypes from "prop-types";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import { useEffect } from "react";
import axios from "axios";
import { useState } from "react";

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`vertical-tabpanel-${index}`}
      aria-labelledby={`vertical-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box sx={{ p: 3 }}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

TabPanel.propTypes = {
  children: PropTypes.node,
  index: PropTypes.number.isRequired,
  value: PropTypes.number.isRequired,
};

function a11yProps(index) {
  return {
    id: `vertical-tab-${index}`,
    "aria-controls": `vertical-tabpanel-${index}`,
  };
}

export default function StudentsList() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  const [User, setUser] = useState();

  useEffect(()=>{
    axios.get('http://localhost:3001/users').then(res=>setUser(res.data))
  },[])
  return (
    <Box
      sx={{
        flexGrow: 1,
        bgcolor: "background.paper",
        display: "flex",
        height: 224,
      }}
    >
      <Tabs
        orientation="vertical"
        variant="scrollable"
        value={value}
        onChange={handleChange}
        aria-label="Vertical tabs example"
        sx={{ borderRight: 1, borderColor: "divider" }}
      >
        <Tab label="Item One" {...a11yProps(0)} />
        <Tab label="Item Two" {...a11yProps(1)} />
        <Tab label="Item Three" {...a11yProps(2)} />
      </Tabs>
      <TabPanel value={value} index={0}>
        {User.length === 0 ? " " : alert('a')}
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item Two
      </TabPanel>
      <TabPanel value={value} index={2}>
        Item Three
      </TabPanel>
    </Box>
  );
}

I hope smn could help me with that problem. Thanks for ur attention

Tags:

2

Answers


  1. 0

    I think the problem might be how you’re initializing User. You’re not passing a value, so it will initially be undefined. Then if you try to get its length you get an error since undefined doesn’t have a length. Try initializing it to an empty array instead:

    const [User, setUser] = useState([]);

    If that doesn’t work you could check in the template directly if User exists before getting its length:

    <TabPanel value={value} index={0}>
  {User && User.length === 0 ? "No users available" : alert('a')}
</TabPanel>
    Login or Signup to reply.
  2. 0

    Well, your ‘User’ is initialized as:

    const [User, setUser] = useState();

    Please notice that it is filled with nothing, and nothing doesn’t have a length attribute, there’s no utility for it. You should initialize the state as:

    const [User, setUser] = useState([]);

    as an empty array, so the length is 0, or

    const [User, setUser] = useState("");
    which is a string, by definition an array of characters.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search