3.6 KiB
3.6 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036172 | Render State in the User Interface Another Way | 6 | false | Estado de render en la interfaz de usuario de otra manera |
Description
state
en un componente. En el método render()
, antes de la declaración de return
, puede escribir JavaScript directamente. Por ejemplo, podría declarar funciones, acceder a datos de state
o props
, realizar cálculos en estos datos, etc. Luego, puede asignar cualquier dato a las variables, a las que tiene acceso en la declaración de return
. Instructions
MyComponent
, defina una const
llamada name
y establezca que sea igual al valor del nombre en el state
del componente. Debido a que puede escribir JavaScript directamente en esta parte del código, no tiene que incluir esta referencia entre llaves. A continuación, en la declaración de retorno, represente este valor en una etiqueta h1
utilizando el name
la variable. Recuerde, debe usar la sintaxis JSX (llaves para JavaScript) en la declaración de devolución. Tests
tests:
- text: <code>MyComponent</code> debe tener un <code>name</code> clave con el valor <code>freeCodeCamp</code> almacenado en su estado.
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state("name") === "freeCodeCamp", "<code>MyComponent</code> should have a key <code>name</code> with value <code>freeCodeCamp</code> stored in its state.");'
- text: <code>MyComponent</code> debe representar un encabezado <code>h1</code> incluido en un solo <code>div</code> .
testString: 'assert(/<div><h1>.*<\/h1><\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html()), "<code>MyComponent</code> should render an <code>h1</code> header enclosed in a single <code>div</code>.");'
- text: 'La etiqueta <code>h1</code> representada debe incluir una referencia a <code>{name}</code> .'
testString: 'getUserInput => assert(/<h1>\n*\s*\{\s*name\s*\}\s*\n*<\/h1>/.test(getUserInput("index")), "The rendered <code>h1</code> tag should include a reference to <code>{name}</code>.");'
- text: El encabezado <code>h1</code> representado debe contener texto representado desde el estado del componente.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: "TestName" }); return waitForIt(() => mockedComponent.html()) }; const firstValue = await first(); assert(firstValue === "<div><h1>TestName</h1></div>", "The rendered <code>h1</code> header should contain text rendered from the component's state."); };'
Challenge Seed
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'freeCodeCamp'
}
}
render() {
// change code below this line
// change code above this line
return (
<div>
{ /* change code below this line */ }
{ /* change code above this line */ }
</div>
);
}
};
After Test
console.info('after the test');
Solution
// solution required