Unform

Complex structures

Complex structures

Most of the time, the form structure is based on how data is received or restored from the back-end, including relationships and complex data structures.

While using Unform, you can use the dot notation inside the input name to nest structures like objects or arrays.

<Input name="author.name" /> // { author: { name: 'Diego' } }
<Input name="lessons[0].name" /> // { lessons: [{ name: 'Lesson 01' }] }
<Input name="some.complex[0].data[0].structure" /> // You already got it

To do so, use the Scope component to create children structures easily:

1import { Form, Scope } from '@unform/core';
2
3export default function CourseForm() {
4 function handleSubmit(data) {
5 console.log(data);
6
7 /**
8 * {
9 * title: 'Course title',
10 * author: {
11 * name: 'John Doe',
12 * },
13 * modules: [
14 * {
15 * title: 'Module 01',
16 * lessons: [
17 * { title: 'Lesson 01' },
18 * { title: 'Lesson 02' },
19 * ]
20 * },
21 * {
22 * title: 'Module 02',
23 * lessons: [
24 * { title: 'Lesson 03' },
25 * { title: 'Lesson 04' },
26 * ]
27 * }
28 * ]
29 * }
30 */
31 }
32
33 return (
34 <Form onSubmit={handleSubmit}>
35 <Input name="title" />
36 <Input name="author.name" />
37
38 <Scope path="modules[0]">
39 <Input name="title" />
40
41 <Input name="lessons[0].videoId" />
42 <Input name="lessons[1].videoId" />
43 </Scope>
44
45 <Scope path="modules[1]">
46 <Input name="title" />
47
48 <Input name="lessons[0].videoId" />
49 <Input name="lessons[1].videoId" />
50 </Scope>
51 </Form>
52 );
53}
Edit this page on GitHub