state
em um componente. No método render()
, antes da instrução de return
, você pode escrever JavaScript diretamente. Por exemplo, você poderia declarar funções, acessar dados do state
ou props
, executar cálculos nesses dados e assim por diante. Em seguida, você pode atribuir dados a variáveis às quais você tem acesso na declaração de return
. MyComponent
, defina uma const
chamada name
e defina-a como igual ao valor do nome no state
do componente. Como você pode escrever JavaScript diretamente nessa parte do código, não é necessário incluir essa referência entre chaves. Em seguida, na instrução de retorno, renderize esse valor em uma tag h1
usando o name
da variável. Lembre-se, você precisa usar a sintaxe JSX (chaves para JavaScript) na declaração de retorno. MyComponent
deve ter um name
chave com valor freeCodeCamp
armazenado em seu 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
deve renderizar um cabeçalho h1
em uma única div
.
testString: 'assert(/MyComponent
should render an h1
header enclosed in a single div
.");'
- text: 'A tag h1
renderizada deve incluir uma referência a {name}
.'
testString: 'getUserInput => assert(/h1
tag should include a reference to {name}
.");'
- text: O cabeçalho h1
renderizado deve conter texto renderizado a partir do estado do 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