Back

Technologies:

javascriptjavascript
reactjsreactjs
avatar
Tolerim
a month ago

Please provide a solution to the problem of encountering an Uncaught TypeError that prevents reading properties of undefined, specifically related to the 'map' function.

As a developer using Async/Await to make a GET request with Axios, I have stored the retrieved JSON response in a state variable called tutorDetails within the useMemo hook. However, React JSX within the return block is not correctly populated with the intended JSON response, resulting in incomplete content. How can I guarantee that the return JSX code block only processes when the state variable has been correctly filled with intended JSON response? If there is no straightforward solution to this issue, please suggest a workaround. Note that the code contains a TutorCard component that displays tutor information, such as their ID, name, grade, subject, and alternative subjects. The component also includes an AlertDialogSlide subcomponent that opens a modal window with detailed tutor information, including grade and subject. The tutorDetails state variable is updated via the useMemo() hook's async function and the axios.get() function.
Answers(2)
avatar
Vogi
a month ago
Verified Answer
To ensure that the return JSX code block only processes when the state variable has been correctly filled with intended JSON response, you can use a conditional statement to check if the state variable is not null or undefined before rendering the JSX code block. For example: 
if (tutorDetails) {
  return (
    <div>
      <TutorCard tutorDetails={tutorDetails} />
      <AlertDialogSlide tutorDetails={tutorDetails} />
    </div>
  );
} else {
  return null;
}
This will ensure that the JSX code block is only processed when the state variable has been correctly filled with intended JSON response. I hope this helps! Let me know if you have any other questions or if there's anything else I can help you with.

Sources

javascript - Return JSX from function - Stack Overflowjavascript - The state variable doesn't store JSON response before it's ...javascript - State variable doesn't store JSON response before it's ...TypeScript: Documentation - JSX
avatar
Tolerim
a month ago
Yes! You can use the state variable tutorDetails to conditionally render the JSX code block in the return statement. 
{tutorDetails && 
  <div>
    <strong>Level:</strong> {props.grade}

    <strong>Subject:</strong> {props.subject}

    <strong>Alternative Subject:</strong> {tutorDetails.subjects[0]} 
  </div>
}
This will only render the div if tutorDetails is truthy. Another workaround is to use a loading state variable that is set to true when the Axios call is made and set to false when the data has been received and the state variable is set. 
function AlertDialogSlide(props) {
  const [open, setOpen] = React.useState(false);
  const [loaded, setLoaded] = React.useState(false);

  const handleClickOpen = () =&gt; {
    setOpen(true);
  };

  const handleClose = () =&gt; {
    setOpen(false);
  };

  const [tutorDetails, setTutorDetails] = useState({});

  useMemo( () =&gt; {
    const retrieveData = async () =&gt; {
        const resp = await axios.get('`API call` + props.tutorID');
        console.log("Tutor Info Response: " + JSON.stringify(resp.data));
        console.log("AltSubjects: " + JSON.stringify(resp.data.subjects[0]));
        setTutorDetails(resp.data);
        setLoaded(true);
    }

    retrieveData();
}, []);

  return (
    <div>
      <Button variant="outlined" onClick={handleClickOpen}>
        {'>'}
      </Button>
      <Dialog
        open={open}
        TransitionComponent={Transition}
        keepMounted
        onClose={handleClose}
        aria-describedby="alert-dialog-slide-description"
        fullWidth = {true}
      >
        <DialogTitle>{props.firstName + " " + props.lastName}</DialogTitle>
        <DialogContent>
          {loaded ? 
            <div>
              <strong>Level:</strong> {props.grade}

              <strong>Subject:</strong> {props.subject}

              <strong>Alternative Subject:</strong> {tutorDetails.subjects[0]} 
            </div>
            : "Loading..."
          }
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>Close</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}
This will display "Loading..." until the data has been loaded, at which point the rest of the JSX code block will be rendered.
;