react native : custom component with color parameter

Question

Im doing the exercises to learn react native on codecademy.

I am told "In React, properties are passed as objects on the first parameter to our components. You need to add this parameter in the custom component and use the color property as the background color."

I need to pass color as a parameter to my Box custom component. This is my code:

export const Box = (color) => (
<View color={color} style={{ width: 100, height: 100, backgroundColor: this.props.color }} />
  );

It throws me a syntax error. I also tried :

export const Box = (color) => (
<View style={{ width: 100, height: 100, backgroundColor: color }} />
  );

But I am told "View should have a background color set by the color property.". It's the same when I do

 export const Box = (color) => (
    <View style={{ width: 100, height: 100, backgroundColor: {color} }} />
      );

It's very basic but I'm always mistaken when it comes to calling variables in React and properly using them...If you could help me that would be great! thanks

Answer 1

Basically, you can get props like this:

export const Box = ( props ) => (
<View color={props.color} style={{ width: 100, height: 100, backgroundColor: props.color }} />);