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>
}
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>
