5.0 KiB
5.0 KiB
id | title | challengeType | isRequired | forumTopicId |
---|---|---|---|---|
5a24c314108439a4d4036169 | Pass Props to a Stateless Functional Component | 6 | false | 301402 |
Description
App
component which renders a child component called Welcome
which is a stateless functional component. You can pass Welcome
a user
property by writing:
<App>
<Welcome user='Mark' />
</App>
You use custom HTML attributes created by you and supported by React to be passed to the component. In this case, the created property user
is passed 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'; })());
- 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'; })());
- 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 })());
- 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 ); })());
- text: The <code>date</code> prop should be generated by calling <code>Date()</code>
testString: assert(/<CurrentDatedate={Date\(\)}\/>/.test(code.replace(/\s/g, '')))
- text: The <code>CurrentDate</code> component should render the value from the <code>date</code> prop in the <code>p</code> tag.
testString: let date = "dummy date"; assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CurrentDate, {date})); return mockedComponent.find('p').html().includes(date); })());
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
ReactDOM.render(<Calendar />, document.getElementById('root'))
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>
);
}
};