5.1 KiB
5.1 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036169 | Pass Props to a Stateless Functional Component | 6 | false | Pase los apoyos a un componente funcional sin estado |
Description
App
que representa un componente secundario llamado Welcome
que es un componente funcional sin estado. Puede pasar user
propiedad de Welcome
un user
escribiendo: <App>Utiliza los atributos HTML personalizados para los cuales React proporciona soporte para pasar el
<Bienvenido usuario = 'Marcar' />
</App>
user
la propiedad al componente Welcome
. Como Welcome
es un componente funcional sin estado, tiene acceso a este valor así: const Welcome = (props) => <h1> Hola, {props.user}! </h1>Es estándar llamar a este valor
props
y cuando se trata de componentes funcionales sin estado, básicamente lo considera como un argumento de una función que devuelve JSX. Puede acceder al valor del argumento en el cuerpo de la función. Con los componentes de clase, verás que esto es un poco diferente. Instructions
Calendar
y CurrentDate
en el editor de código. Al representar CurrentDate
desde el componente Calendar
, pase una propiedad de date
asignada a la fecha actual desde el objeto Date
de JavaScript. Luego acceda a este prop
en el componente CurrentDate
, mostrando su valor dentro de las etiquetas p
. Tenga en cuenta que para que prop
valores prop
sean evaluados como JavaScript, deben estar encerrados entre paréntesis, por ejemplo date={Date()}
. Tests
tests:
- text: El componente <code>Calendar</code> debe devolver un único elemento <code>div</code> .
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: El segundo elemento secundario del componente <code>Calendar</code> debe ser el componente <code>CurrentDate</code> .
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: El componente <code>CurrentDate</code> debe tener una prop llamada <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: La <code>date</code> prop. Del <code>CurrentDate</code> debe contener una cadena de texto.
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: El componente <code>CurrentDate</code> debe representar el valor de la <code>date</code> prop en la etiqueta <code>p</code> .
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
// solution required