React.js JS Sending Array as a property to an element turns the array into an object

I’m attempting to understand why sending an array as a prop to another element transforms it into an object with a value of the array but I would like some help understanding the why and whether it is a universal JavaScript ‘quirk’ or if it is to do with React and props. The next paragraph is context and can be skipped

The way this part of my app works is that I have a mapping function in my navigation element that goes through an array of all the navigation items. it adds a list item for each nav item and then uses a method to check if the nav item has a ‘subMenu’ property and if so it maps the values in the submenu to an array and sends the array to a DropDown element as a prop that will then map those values into list items

However I noticed through logging when I send the array as a prop to the DropDown element it becomes an object with a single value of the array. The array “subMenu” goes from [‘Test’, ‘Test2’] to an object {subMenu: Array(2)}. Took me a bit to realise but the array is clearly being converted into an object with one value (the array) when supplied as a prop

The same variable being logged differently in the element it was created in and the element it is sent to

//The list of submenu navigation items being mapped to an array and provided to dropdown
const subMenu = (navItem) => {
   
    if (navItem.hasOwnProperty('subMenu')) {//Check if it has a sub menu

        const subMenu = navItem.subMenu.map((menu) => {
            return menu.route;/A string that is just the text of the submenu item
        })
        console.log(subMenu);//Logging the simple array of strings, is logged as ['Test', 'Test2']
        return <DropDown subMenu={subMenu} />//Sending the array to a DropDown element
    }
}

The DropDown element in its own file

const DropDown = (argument) => {
    console.log(argument);//Expected to be ['Test', 'Test2'] the exact same as the provided argument but is actually {subMenu: Array(2)}
    return (
        <ul>
            {argument.subMenu.map((navItem) => {//Have to access the value "subMenu" of the object that the array was converted into
                return console.log(navItem)
            })}
        </ul>
    )
    
}

export default DropDown;

I wanted to know two things. Is this a universal javacript thing, and is there something happening behind the hood that I should know that may help me in the future?

Mostly I’m using this post to help any future aspiring devs who can’t figure out why their array isn’t working when used as an argument, it took me a while to figure out why my app was crashing. Any explanation would be great. Thank you

Answer

This has to do with React and props (and not with JavaScript itself). You pass a value (i.e. prop to a child component) and props itself is an object. Instead of writing argument you could also write:

 const DropDown = (props) => {...}

So basically you can handle props in different ways.

Option 1

 const DropDown = (props) => {
        return (
            <ul>
                {props.subMenu.map((navItem) => {
                   ...
                })}
            </ul>
        )
        
    }

Option 2

const DropDown = (argument) => {
    const subMenu = argument.subMenu;
    return (
        <ul>
            {subMenu.map((navItem) => {
               ...
            })}
        </ul>
    )
    
}

Option 3: with object destructuring

    const DropDown = (argument) => {
    const { subMenu } = argument
    return (
        <ul>
            {subMenu.map((navItem) => {
               ...
            })}
        </ul>
    )
    
}

Option 4: destructure props inline

const DropDown = ({ subMenu }) => {
    return (
        <ul>
            {subMenu.map((navItem) => {
               ...
            })}
        </ul>
    )
    
}

Advertisement

Answer