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';23export default function CourseForm() {4 function handleSubmit(data) {5 console.log(data);67 /**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 }3233 return (34 <Form onSubmit={handleSubmit}>35 <Input name="title" />36 <Input name="author.name" />3738 <Scope path="modules[0]">39 <Input name="title" />4041 <Input name="lessons[0].videoId" />42 <Input name="lessons[1].videoId" />43 </Scope>4445 <Scope path="modules[1]">46 <Input name="title" />4748 <Input name="lessons[0].videoId" />49 <Input name="lessons[1].videoId" />50 </Scope>51 </Form>52 );53}