Help: Using Props with Stateless Functional Components

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

My solution doesnt seem to pass the challenges, not sure where i went wrong @DanCouper

class CampSite extends React.Component {
	constructor(props) {
		super(props);
	}
	render() {
	return ( < div > < Camper name="still CamperBot" / >< /div>);
	}
};
const Camper = (props) => {
	return ( < p > {this.props.name} < /p>);
};
CampSite.propTypes = {
	name: PropTypes.string.isRequired
}
CampSite.defaultProps = {
	name: "CamperBot"
};

You’re attaching the defaultProps and the propTypes to the wrong component. You’re also arbitrarily adding spaces between almost everything, which will cause the code to break.

1 Like

Ok I see that now - I removed the THIS from the stateless component

However only 1 test case does not pass now

The Camper component should include default props which assign the string CamperBot to the key name .

so my code looks like this

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

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

EDIT: i see my typo now for camperbot spelling

1 Like