Problem understanding const assignment from props in context of Wordpress block development

Question

I'm not sure if this is my lack of understanding of JavaScript, or React, or Wordpress modifications to React, but what is this doing?

export default function MyFunction( props ) {
        const {
                attributes: {
                    foo1,
                    foo2
                },
                setAttributes,
        } = props;

I thought it was taking React props and creating two consts scoped to MyFunction: "attributes" and "setAttributes". But, later on, if I do something like

   return (
      <>
        <Fragment>
            <div>{ foo1 }</div> // this works fine
            <div>{ attributes }</div> // this says "ReferenceError: Can't find variable: attributes"
        </Fragment>
      </>
    );

I don't understand why I can reference foo1 without going attributes.foo1; and I don't understand why I can't reference attributes. So, I'm clearly not understanding what seems like a "simple" assignment. Help?

Answer 1

You have drilled passed attributes when doing the object spread so you only assigned the inner values. There are a few ways you can solve this

export default function MyFunction( props ) {
        const {
                attributes: {
                    foo1,
                    foo2
                },
                attributes, // grab attributes too
                setAttributes,
        } = props;

export default function MyFunction( props ) {
        const {
                attributes,
                setAttributes,
        } = props;
        const { foo1, foo2 } = attributes; // grab the values after

Or you simply can just grab attributes like above and use dot notation attributes.foo1