5.3 KiB
5.3 KiB
id | title | challengeType | isRequired |
---|---|---|---|
5a24c314108439a4d4036169 | Pass Props to a Stateless Functional Component | 6 | false |
Description
App
component which renders a child component called Welcome
that is a stateless functional component. You can pass Welcome
a user
property by writing:
<App>You use custom HTML attributes that React provides support for to pass the property
<Welcome user='Mark' />
</App>
user
to the component Welcome
. Since Welcome
is a stateless functional component, it has access to this value like so:
const Welcome = (props) => <h1>Hello, {props.user}!</h1>It is standard to call this value
props
and when dealing with stateless functional components, you basically consider it as an argument to a function which returns JSX. You can access the value of the argument in the function body. With class components, you will see this is a little different.
Instructions
Calendar
and CurrentDate
components in the code editor. When rendering CurrentDate
from the Calendar
component, pass in a property of date
assigned to the current date from JavaScript's Date
object. Then access this prop
in the CurrentDate
component, showing its value within the p
tags. Note that for prop
values to be evaluated as JavaScript, they must be enclosed in curly brackets, for instance date={Date()}
.
Tests
tests:
- text: The <code>Calendar</code> component should return a single <code>div</code> element.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().type() === "div"; })(), "The <code>Calendar</code> component should return a single <code>div</code> element.");'
- text: The second child of the <code>Calendar</code> component should be the <code>CurrentDate</code> component.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).name() === "CurrentDate"; })(), "The second child of the <code>Calendar</code> component should be the <code>CurrentDate</code> component.");'
- text: The <code>CurrentDate</code> component should have a prop called <code>date</code>.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).props().date })(), "The <code>CurrentDate</code> component should have a prop called <code>date</code>.");'
- text: The <code>date</code> prop of the <code>CurrentDate</code> should contain a string of text.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); const prop = mockedComponent.children().childAt(1).props().date; return( typeof prop === "string" && prop.length > 0 ); })(), "The <code>date</code> prop of the <code>CurrentDate</code> should contain a string of text.");'
- text: The <code>CurrentDate</code> component should render the value from the <code>date</code> prop in the <code>p</code> tag.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.find("p").html().includes(Date().substr(3)); })(), "The <code>CurrentDate</code> component should render the value from the <code>date</code> prop in the <code>p</code> tag.");'
Challenge Seed
const CurrentDate = (props) => {
return (
<div>
{ /* change code below this line */ }
<p>The current date is: </p>
{ /* change code above this line */ }
</div>
);
};
class Calendar extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h3>What date is it?</h3>
{ /* change code below this line */ }
<CurrentDate />
{ /* change code above this line */ }
</div>
);
}
};
After Test
console.info('after the test');
Solution
const CurrentDate = (props) => {
return (
<div>
{ /* change code below this line */ }
<p>The current date is: {props.date}</p>
{ /* change code above this line */ }
</div>
);
};
class Calendar extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h3>What date is it?</h3>
{ /* change code below this line */ }
<CurrentDate date={Date()} />
{ /* change code above this line */ }
</div>
);
}
};