Review Using Props with Stateless Functional Components: stateless functional component vs. stateless component

JavaScript
1 
class CampSite extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <Camper/>
      </div>
    );
  }
};
// change code below this line
const Camper = (props) => {
  return (
    <p>{props.name}</p>
  );
};

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

Hi there,

This is what I’ve got, and I’m not sure why it isn’t working. The error I get is “The Camper component should include default props which assign the string CamperBot to the key name,” but the default name renders in the preview screen fine. Should this be a stateless component instead of a stateless functional component? If so, why?

I looked at the answer given, and it looks like mine is the same as theirs except for the way I’ve written the arrow function. Is that an issue? I copied the style of the arrow function from the provided code on this challenge https://learn.freecodecamp.org/front-end-libraries/react/use-proptypes-to-define-the-props-you-expect/, and the default name wouldn’t render unless I added the parenthesis around the HTML element.

2

Nothing wrong with your React code. You just misspelled CamperBot (uppercase B).

3

Yep :woman_facepalming: Thanks a ton.