PLS Help: Review Using Props with Stateless Functional Components

PLS Help: Review Using Props with Stateless Functional Components
0

#1

HI! Why do you think my code is not valid?

class CampSite extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <Camper />
      </div>
    );
  }
};
// change code below this line
Camper.defaultProps = {name: 'CamperBot'};
Camper.propTypes = PropTypes.string.isRequired;

class Camper extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <p>{props.name}</p>
    );
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/review-using-props-with-stateless-functional-components


#2

For starters the instructions said to pass in a value in value for name as a prop to the Camper component. Props are passed from the parent component where the child component is referenced. In this case, the parent (Campsite) references <Camper /> in it’s render method. I do not see you passing a prop with any value there.

Second, you can not define defaultProps or propTypes on a component before you define it, so you need to move those two lines to be after the Camper class definition.

Third, I suggest you review how to define propTypes correctly, because your syntax is incorrect.

Lastly, since you created a React component instead of a Stateless Functional Component, you can not just reference props.name in Camper’s render. Instead, you must add something before props.name to get at the props passed to it. Review how to access props using this.props.


#3

Thanks a lot for being so quick and helpful!!


#4

Remember, the whole point of this challenge is to use a Stateless Functional Component (SFC) instead of creating a React Component. Try to rewrite your code with Camper being an SFC.


#5

You’ve been right about everything, thanks a lot! I’ve really needed this. :slightly_smiling_face: