How do I pass multiple arguments to a function in React?

The below seems to make sense, but only data is retrieving the correct information. level is defined, but just an empty object.

<OutputContent data = { this.props.data } level = {0} />

function OutputContent({data}, level) {
    console.log(data);
    console.log(level);
    return <p>A simple example</p>
}

How do I pass multiple arguments to a function in React?

The below seems to make sense, but only data is retrieving the correct information. level is defined, but just an empty object.

<OutputContent data = { this.props.data } level = {0} />

function OutputContent({data}, level) {
    console.log(data);
    console.log(level);
    return <p>A simple example</p>
}

• javascript
• reactjs
• function
• components

• For anyone having this question, you can learn all the details about deconstructing here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… – Mohsen Kamrani Commented Mar 12, 2020 at 0:07

2 Answers 2

A stateless functional component like the one you have written gets all the props as the first argument.

function OutputContent(props) {
  console.log(props.data);
  console.log(props.level);
  return <p>A simple example</p>;
}

So if you want to use destructuring, make sure you desctructure all the props from the same object.

function OutputContent({data, level}) {
  console.log(data);
  console.log(level);
  return <p>A simple example</p>;
}

In addition, when your arguments is not only object but different types.

Function:

onChangeAddress = (e, flag) => {

     console.log(e.target.value);
     console.log(flag);
}

Caller

onChange={(e)=>this.onChangeAddress(e, 'r')}

Html Code

<Radio.Group onChange={(e)=>this.onChangeAddress(e, 'r')}>
    <Radio value={"Home"}>
        {language.switchValue?'Home Address':'বাসার ঠিকানা'}
    </Radio>
    <Radio value={"Office"}>
         {language.switchValue?'Office Address':'অফিসের ঠিকানা'}
    </Radio>
    <Radio value={"Other"}>
       {language.switchValue?'Other Address':'অন্যান্য ঠিকানা'}
    </Radio>
    <Radio value={"localPickup"}>
         {language.switchValue?'Pickup from Mall':'শপিং মল থেকে পিকআপ'}
    </Radio>
</Radio.Group>