Dr. What's wrong with my Camper (Component)?

Tell us what’s happening:
Hey guys, so I am in this challenge Review Using Props with Stateless Functional Components and I am curious as to why, my way of defining the Camper component doesn’t pass the challenge.

  **Your code so far**

// This is how I created Camper Component
const Camper = function(props) { 
return(
<div>
<p>{props.name}!</p>
</div>
)
};

// This is how it was defined in the Get a Hint section
const Camper = props => <p>{props.name}</p>;


Camper.defaultProps = {
name: "CamperBot"
};

Camper.propTypes = {
name: PropTypes.string.isRequired
};

In my view, my code says exactly as what there is on the Get a Hint page but I am confused as to why my doesn’t pass the test?

Challenge: Review Using Props with Stateless Functional Components

Link to the challenge:

Hi @high-bouncing-lover !

This part is right.

But this part is wrong.

You should be getting an error message because you used const twice for the same name of Camper.

1 Like

Hey there,

your code will run if you remove the exclamation mark in the p tag.

@jwilkins.oboe I think they are asking what’s the difference between both Camper implementations, because functionally they are the same.

Ohh ok.
Yeah I misread that. :grinning:

But also, for your approach you don’t need the divs. You can just return the p tag.

const Camper = function(props) { 
return(
<p>{props.name}</p>
)
};

You don’t even need to surround the p element with ( and ):

return <p>{props.name}</p>;

or the return statement:

const Camper = props => <p>{props.name}</p>;

That’s true.

But the OP isn’t wrong if they want to write it without arrow functions.
As @miku86 pointed out, the OP would have passed the challenge if they hadn’t added the exclamation mark.

So I guess it is just a matter of preference how they want to write the function. :grinning:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.