input
and textarea
, which makes them controlled components. This applies to other form elements as well, including the regular HTML form
element.
MyForm
component is set up with an empty form
with a submit handler. The submit handler will be called when the form is submitted.
We've added a button which submits the form. You can see it has the type
set to submit
indicating it is the button controlling the form. Add the input
element in the form
and set its value
and onChange()
attributes like the last challenge. You should then complete the handleSubmit
method so that it sets the component state property submit
to the current input value in the local state
.
Note: You also must call event.preventDefault()
in the submit handler, to prevent the default form submit behavior which will refresh the web page.
Finally, create an h1
tag after the form
which renders the submit
value from the component's state
. You can then type in the form and click the button (or press enter), and you should see your input rendered to the page.
MyForm
should return a div
element which contains a form
and an h1
tag. The form should include an input
and a button
.
testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyForm)); return (mockedComponent.find('div').children().find('form').length === 1 && mockedComponent.find('div').children().find('h1').length === 1 && mockedComponent.find('form').children().find('input').length === 1 && mockedComponent.find('form').children().find('button').length === 1) })(), 'MyForm
should return a div
element which contains a form
and an h1
tag. The form should include an input
and a button
.');
- text: The state of MyForm
should initialize with input
and submit
properties, both set to empty strings.
testString: assert(Enzyme.mount(React.createElement(MyForm)).state('input') === '' && Enzyme.mount(React.createElement(MyForm)).state('submit') === '', 'The state of MyForm
should initialize with input
and submit
properties, both set to empty strings.');
- text: Typing in the input
element should update the input
property of the component's state.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: '''' }); return waitForIt(() => mockedComponent.state(''input''))}; const _2 = () => { mockedComponent.find(''input'').simulate(''change'', { target: { value: ''TestInput'' }}); return waitForIt(() => ({ state: mockedComponent.state(''input''), inputVal: mockedComponent.find(''input'').props().value }))}; const before = await _1(); const after = await _2(); assert(before === '''' && after.state === ''TestInput'' && after.inputVal === ''TestInput'', ''Typing in the input
element should update the input
property of the component's state.''); }; '
- text: Submitting the form should run handleSubmit
which should set the submit
property in state equal to the current input.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: '''' }); mockedComponent.setState({submit: ''''}); mockedComponent.find(''input'').simulate(''change'', {target: {value: ''SubmitInput''}}); return waitForIt(() => mockedComponent.state(''submit''))}; const _2 = () => { mockedComponent.find(''form'').simulate(''submit''); return waitForIt(() => mockedComponent.state(''submit''))}; const before = await _1(); const after = await _2(); assert(before === '''' && after === ''SubmitInput'', ''Submitting the form should run handleSubmit
which should set the submit
property in state equal to the current input.''); };'
- text: The h1
header should render the value of the submit
field from the component's state.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: '''' }); mockedComponent.setState({submit: ''''}); mockedComponent.find(''input'').simulate(''change'', {target: {value: ''TestInput''}}); return waitForIt(() => mockedComponent.find(''h1'').text())}; const _2 = () => { mockedComponent.find(''form'').simulate(''submit''); return waitForIt(() => mockedComponent.find(''h1'').text())}; const before = await _1(); const after = await _2(); assert(before === '''' && after === ''TestInput'', ''The h1
header should render the value of the submit
field from the component's state.''); }; '
```