Spread operator for props are not passing to component

Question

I am having an issue passing spread operator props to components. Instead of returning a list with values, it is returning an empty list.

This is how I'm passing in my props to the component

const APIKey = "abc";
const url = "def";
const props = { APIKey, url}
return (
      <ProfileModal {...props} />
)

However, it is returning an empty list.

const FunctionName = (anotherPropIhave, props) => {
      const { APIKey, url } = props;
}

Answer 1

React pass all props as first argument of react functional component. So This is an object.

Correct way to get other props is , ...props.

So:

const FunctionName = ({ anotherPropIhave, ...props }) => {
  const { APIKey, url } = props;
}

Answer 2

Try this:

const APIKey = "abc";
const url = "def";
const props = { APIKey: APIKey, url: url}
return (
      <ProfileModal {...props} />
)