React.Component
, but does not use internal state (covered in the next challenge). Finally, a stateful component is any component that does maintain its own internal state. You may see stateful components referred to simply as components or React components.
A common pattern is to try to minimize statefulness and to create stateless functional components wherever possible. This helps contain your state management to a specific area of your application. In turn, this improves development and maintenance of your app by making it easier to follow how changes to state affect its behavior.
CampSite
component that renders a Camper
component as a child. Define the Camper
component and assign it default props of { name: 'CamperBot' }
. Inside the Camper
component, render any code that you want, but make sure to have one p
element that includes only the name
value that is passed in as a prop
. Finally, define propTypes
on the Camper
component to require name
to be provided as a prop and verify that it is of type string
.
CampSite
component should render.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find('CampSite').length === 1; })(), 'The CampSite
component should render.');
- text: The Camper
component should render.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find('Camper').length === 1; })(), 'The Camper
component should render.');
- text: The Camper
component should include default props which assign the string CamperBot
to the key name
.
testString: getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').replace(/\s/g, ''); const verify1 = 'Camper.defaultProps={name:\'CamperBot\'}'; const verify2 = 'Camper.defaultProps={name:"CamperBot"}'; return (noWhiteSpace.includes(verify1) || noWhiteSpace.includes(verify2)); })(), 'The Camper
component should include default props which assign the string CamperBot
to the key name
.');
- text: The Camper
component should include prop types which require the name
prop to be of type string
.
testString: getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); const noWhiteSpace = getUserInput('index').replace(/\s/g, ''); const verifyDefaultProps = 'Camper.propTypes={name:PropTypes.string.isRequired}'; return noWhiteSpace.includes(verifyDefaultProps); })(), 'The Camper
component should include prop types which require the name
prop to be of type string
.');
- text: The Camper
component should contain a p
element with only the text from the name
prop.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find('p').text() === mockedComponent.find('Camper').props().name; })(), 'The Camper
component should contain a p
element with only the text from the name
prop.');
```
{props.name}