Review Using Props with Stateless Functional Component[2]s

JavaScript
1

Tell us what’s happening:
I’ve been trying to find out how to add a defaultprops to anything in this code for almost an hour now… I’ve used React Github, YouTube, Google and StackOverflow. I’ve gotten all the checks green but that one. And, I don’t know what I’m doing in general with React. And, I wish you guys had full examples like you did for your other courses so the newbies could be eased into it.

Your code so far


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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) 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

1 Like
2

class CampSite extends React.Component {
constructor(props) {
super(props);
}
render() {
return (




);
}
};
// change code below this line
const Camper = (props) => (

{props.name}

); Camper.defaultProps = { name: 'Camperbot' }; Camper.propTypes = { name: PropTypes.string.isRequired }; //I also tried this
4

have to add defaultProps to Camper.

Camper.defaultProps={name: "CamperBot"}

be careful with comma, I was stuck because of it. eg:

Camper.defaultProps={xxxx: "CamperBot",}//doesnt work
Camper.propTypes={name: PropTypes.xxxxxx.xxXxxxxxxx,}//doesnt work

in your second example it throws an error because you wasn’t including the p.

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

not

{props.name}
5 
class CampSite extends React.Component {

  constructor(props) {

    super(props);

  }

  render() {

    return (

      <div>

        <Camper name='camper' />

      </div>

    );

  }

};

// change code below this line

class Camper extends React.Component {

  constructor(props) {

    super(props);

  }

  render() {

    return (

      <p>{this.props.name}</p>

    );

  }

};

// change code below this lin

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

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

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

Camper.propTypes = { name:PropTypes.string.IsRequired };
6

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

Thank you for understanding.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like