Props wit stateless functional components

JavaScript
1

Can someone review the code below and advise me where it needs to be rectified?:
Thank you!

Your code so far


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

class Camper extends React.Component {
constructor(props) {
  super(props);
} render() {
   return(
     <div>
      <p>The name of the Camper is {props.name}</p>
      </div>
   );
}
};
Camper.propTypes = {name: PropTypes.string.isRequired};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; rv:71.0) Gecko/20100101 Firefox/71.0.

Challenge: Review Using Props with Stateless Functional Components

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

2

use defaultProps with stateless (functional) component

1 Like
3

It’s asking you to write a function, not a class, for Camper.

Note for future reference that allowing use of defaultProps on functions is going to be deprecated. Standard JS default parameters make it pointless. Example:

function MyComponent ({ someText = "default value!" }) {
  return <p>{someText}</p>;
}

// Or

const MyComponent = ({ someText = "default value!" }) => {
  return <p>{someText}</p>;
}
1 Like
4

Thank you guys for the eye opener.

1 Like