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
. 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. MyComponent
debe tener un name
clave con el valor freeCodeCamp
almacenado en su estado.
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state("name") === "freeCodeCamp", "MyComponent
should have a key name
with value freeCodeCamp
stored in its state.");'
- text: MyComponent
debe representar un encabezado h1
incluido en un solo div
.
testString: 'assert(/MyComponent
should render an h1
header enclosed in a single div
.");'
- text: 'La etiqueta h1
representada debe incluir una referencia a {name}
.'
testString: 'getUserInput => assert(/h1
tag should include a reference to {name}
.");'
- text: El encabezado h1
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 === "h1
header should contain text rendered from the component's state."); };'
```
## Challenge Seed