Curly braces as function parameter

Question

I want to pass emailID as the second parameter to . Can you help me to understand how to pass additional parameter in Curly braces as a function parameter and how to access it in AccountMenuSidebar.

Sorry for asking this basic question.I am a newbie to Javascript and React.

class Invoices extends Component {
    
    render() {
       
       var emailID="guest@somedomain.com";

        const accountLinks = [
            {
                text: 'Account Information',
                url: '/account/user-information',
                icon: 'icon-user',
            },
            {
                text: 'Notifications',
                url: '/account/notifications',
                icon: 'icon-alarm-ringing',
            },
           
        ];

        return (
            <section className="ps-my-account ps-page--account">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-4">
                            <div className="ps-page__left">
                                <AccountMenuSidebar data={accountLinks} /> // Want to pass email id as second argument here
                            </div>
                        </div>                        
                    </div>
                </div>
            </section>
        );
    }
}

export default Invoices;

   const Accountbar = ({ data }) => (
    <aside className="ps-widget--account-dashboard">
        <p>{email}</p>
        <div className="ps-widget__content">
            <ul>
                {data.map((link) => (
                    <li key={link.text} className={link.active ? 'active' : ''}>
                        <Link href={link.url}>
                            <a>
                                <i className={link.icon}></i>
                                {link.text}
                            </a>
                        </Link>
                    </li>
                ))}                
            </ul>
        </div>
    </aside>
);

export default Accountbar;

Answer 1

When you pass the props from Invoices, you usually acces them like this in AccountMenuSidebar:

<AccountMenuSidebar data={accountLinks} />

const AccountMenuSidebar = (props) => {
  return (
    <p>{props.data}</p>
  )
}

However, using destructuring, which lets you directly unpack variables from an object in JavaScript, you can access the props like this instead:

<AccountMenuSidebar data={accountLinks} />

const AccountMenuSidebar = ({ data }) => {
  return (
    <p>{data}</p>
  )
}

So if you want to send another prop, you can access it the same way, i.e.

<AccountMenuSidebar data={accountLinks} email={email} />

const AccountMenuSidebar = (props) => {
  return (
    <>
      <p>{props.data}</p>
      <p>{props.email}</p>
    </>
  )
}

or using destructuring:

<AccountMenuSidebar data={accountLinks} email={email} />

const AccountMenuSidebar = ({ data, email }) => {
  return (
    <>
      <p>{data}</p>
      <p>{email}</p>
    </>
  )
}

Answer 2

<AccountMenuSidebar data={accountLinks} email={emailID} />

and

const Accountbar = (data , emaildID) => (...

or

const Accountbar = (props) => (...

and then you can use props like this...

<ul>
            {props.data.map((link) => (
                <li key={link.text} className={link.active ? 'active' : ''}>
                    <Link href={link.url}>
                        <a>
                            <i className={link.icon}></i>
                            {link.text}
                        </a>
                    </Link>
                </li>
            ))}                
        </ul>