Question 190104 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Passing a function as a prop: Cannot destructure property – undefined

Kia ora! I’m trying to handle creating a responsive navigation menu using Next 13’s app folder (so utilising ‘use client’) and an async/await function for my nav bar (in order to grab the logo). I’m running into some errors I haven’t come across before, and think it’s something to do either with Next’s app folder setup or passing props/functions to an async function.

Here’s some basic code:

export default function Menu() {
    const [isOpen, setIsOpen] = useState(false)
    
    return (
        <Nav isOpen={isOpen} handleClick={() => setIsOpen(!isOpen)} />
    )
}

async function Nav({isOpen, handleClick}) {
    const settings = await getSettings()
    
    return (
        <div className="flex flex-wrap items-center justify-between max-w-screen-xl p-4 mx-auto">

            //image link utilising getSettings
            //nav links

            <button onClick={handleClick} className='//tailwind classes'>
                <span className={`bg-slate-500 block transition-all duration-300 ease-out h-0.5 w-6 rounded-sm ${isOpen ? 'rotate-45 translate-y-1' : '-translate-y-0.5'}`}>
                </span>
            </button> 
        </div>
    )
}

This code as it stands gets me the error: Uncaught (in promise) TypeError: Cannot destructure property 'isOpen' of 'param' as it is undefined.. Interestingly, shuffling the props around (to ({handleClick, isOpen}) gives me the same error but for handleClick, rather than isOpen – so I think I’ve got something wrong with how I’m handling these parameters, but can’t seem to figure out what!

Tags:

2

Answers


  1. 0

    Perhaps in Menu, put in console.log(isOpen); if the console.log shows undefined then you know it’s something to do with isOpen.

    Possibly you need

    import { useState } from "react";

    in Menu.

    Login or Signup to reply.
  2. 0

    Function Nav has problem, you declare Nav is component but you add async before should is not working. Below is the part I fixed but I’m not sure it will help you completely, you can refer to it.

    import React, {useEffect, useState} from 'react';

function Nav(props) {
const {isOpen, handleClick} = props;
const [settings , setSettings] = useState();

useEffect(() => {
    const lstSetting = await getSettings();
    if(lstSetting){
       setSettings(lstSetting)
    }
},[]);

return (
    <div className="flex flex-wrap items-center justify-between max-w-screen-xl p-4 mx-auto">

        //image link utilising getSettings
        //nav links

        <button onClick={handleClick} className='//tailwind classes'>
            <span className={`bg-slate-500 block transition-all duration-300 ease-out h-0.5 w-6 rounded-sm ${isOpen ? 'rotate-45 translate-y-1' : '-translate-y-0.5'}`}>
            </span>
        </button> 
    </div>
)

    }

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

Back To Top
Search