React - Review Using Props with Stateless Functional Components

[bhargavsushant]

Tell us what’s happening:
Describe your issue in detail here.
I am writing a class component instead of the functional one, and as per my understanding I am adding default prop & making the name key as string and required.
However following code is not working. can anyone explain where am I going wrong with this ?

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

class Camper extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired
  };
  
  static defaultProps = {
    name: 'CamperBot'
  };
  
  render() {
    return (
      <p>Hello, {this.props.name}!</p>
    );
  }
}


jsx
class CampSite extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <Camper/>
      </div>
    );
  }
};
// Change code below this line

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

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

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36 Edg/112.0.1722.68

Challenge: React - Review Using Props with Stateless Functional Components

Link to the challenge:

freeCodeCamp.org

[lasjorg]

I don’t understand the code you have posted. Is it two different codes or did you add it all?

This part should work on its own.

class CampSite extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <Camper/>
      </div>
    );
  }
};
// Change code below this line

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

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

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

---

If you added it all you will have the same identifier more than one time. You can not have more than one class named the same and you can not have a function named the same as a class.