Passing Multiple Arguments to Function in React

Question

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

Answer 1

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