Download "77 - React JS - redux-form field validation (валидация, ошибки). Осторожно Замыкание!"

Please wait. We're preparing links for easy ad-free video watching and downloading.

Previous video: 12. Уроки React JS (Разбивка на компоненты)Next video: 16. Уроки React JS (props - важнейшая тема) - react курсы бесплатно

16. Уроки React JS (props - важнейшая тема) - react курсы бесплатно

16. Уроки React JS (props - важнейшая тема) - react курсы бесплатно

Channel: IT-KAMASUTRA

12. Уроки React JS (Разбивка на компоненты)

12. Уроки React JS (Разбивка на компоненты)

Channel: IT-KAMASUTRA

92 - тестируем компоненты, тесты, react-test-renderer - React JS

92 - тестируем компоненты, тесты, react-test-renderer - React JS

Channel: IT-KAMASUTRA

GraphQL #2 Схема и корневой запрос (GraphQL Schema & Root Query)

GraphQL #2 Схема и корневой запрос (GraphQL Schema & Root Query)

Channel: webDev

SWIFT - 08. Дикшинари

SWIFT - 08. Дикшинари

Channel: Alex Skutarenko

GraphQL #14 Удаление данных из БД (Removing Elements from DB)

GraphQL #14 Удаление данных из БД (Removing Elements from DB)

Channel: webDev

40 - React JS Практика - добавление Сообщения

40 - React JS Практика - добавление Сообщения

Channel: IT-KAMASUTRA

🔴 Let's build Uber 2.0 with REACT NATIVE! (Navigation, Redux, Tailwind CSS & Google Autocomplete)

🔴 Let's build Uber 2.0 with REACT NATIVE! (Navigation, Redux, Tailwind CSS & Google Autocomplete)

Channel: Sonny Sangha

🚀 Node.js ✨ Layers and Low Coupling на примере конфига и транспорта ✨ 2022 - 2023 🧑‍💻

🚀 Node.js ✨ Layers and Low Coupling на примере конфига и транспорта ✨ 2022 - 2023 🧑‍💻

Channel: Timur Shemsedinov

53 - React JS практика - классовый компонент (extends React.Component)

53 - React JS практика - классовый компонент (extends React.Component)

Channel: IT-KAMASUTRA

javascript

программирование

уроки

с

нуля

обучение

js

react

react js

reactjs

react курс

react практика

react пример

redux

курсы

инкубатор

минск

online

бесплатно

redux-form

field-validation

валидация

reduxform

практика

примеры

курс

00:00:05

hello friends joint do and my and

00:00:08

devich Dima and my author's course order

00:00:11

the way of the samurai

00:00:12

we continue to talk about the readak form we're

00:00:14

sorry that there was such a break the pictures were

00:00:16

special for me one how will you give an hour to

00:00:19

the goal the matter go to the goal to goals to goals, well,

00:00:21

you still sometimes come up and take

00:00:23

a break because some other

00:00:25

topic takes up your resources and time until, for

00:00:27

example, there is work there, family in this valley is the

00:00:29

same thing, I am also going towards my goal, my

00:00:31

goals are very cool and interesting for

00:00:32

me, yes In fact, in a nutshell,

00:00:34

what did you understand in general where

00:00:35

Dimie is moving to do wants to be a

00:00:37

startuper I want to be a startuper a

00:00:38

real adult kind of feast with

00:00:40

investments of volumes and big money for the

00:00:42

manual while I’m breaking down I want

00:00:44

a cat I want to be a coder usually well damn at the

00:00:47

same time I want like - if there was something

00:00:48

like this, the movements are so global,

00:00:52

because in our life in

00:00:54

our time, an IT specialist can

00:00:56

earn a billion bucks without problems

00:00:58

or from max - it’s only a billion

00:00:59

bucks, but yes, okay,

00:01:00

visually, for this you need to pump up,

00:01:02

too, step by step, pump up,

00:01:04

pump up in those areas of which

00:01:06

I have expertise, this is not

00:01:08

team management, independent team management,

00:01:10

finance, salary, layoffs, we know, as it were,

00:01:15

about the movement strategy, work, well, in short, that’s why

00:01:19

we’ve moved now with

00:01:21

our incubator, we have his office in Danku

00:01:23

Bator, now find our incubator, this is the

00:01:25

place where we train people, yes little by

00:01:27

little we are starting to develop our own

00:01:29

startup products there,

00:01:30

little by little people are starting to send

00:01:32

projects to their startups that are already live with me,

00:01:34

I will tell the guys about them, I will

00:01:36

soon open a separate channel for this and

00:01:38

there will be exactly all the movement around the startup,

00:01:41

that is, there will be like, well, everyone of

00:01:43

you can be startupers, each of

00:01:45

you can be a

00:01:46

programmer, so each of you can

00:01:47

be a startuper before startup means

00:01:49

means movement means again and

00:01:52

closely teas again money engine

00:01:54

about the development of international globalization well, in

00:01:57

short, moving forward if it’s

00:01:59

interesting you should do it if it’s

00:02:00

not interesting, to hell with it, of course, when

00:02:02

programming, well, friends, let

00:02:03

’s go back when the most

00:02:06

important topic is the most important topic guys, don’t

00:02:10

ever reinvent the wheel if you even have

00:02:12

one single input in which

00:02:14

this will already move you to the site

00:02:16

in the company of Gia Po

00:02:17

these will be a lot of forms, we don’t write every

00:02:20

field, we don’t do

00:02:21

what we do in Chechnya, we don’t save this

00:02:24

meet and there somewhere, in no

00:02:25

case do we do everything through the use of

00:02:28

some ready-made libraries that are

00:02:29

designed for this purpose, the ideal

00:02:32

library if you have three dax you can

00:02:34

use the reader forms, everything is great and we do

00:02:36

exactly that and today we will learn how to

00:02:37

validate the lead form, such a

00:02:39

very important topic is an integral part of

00:02:42

any form, form validation, that is,

00:02:43

checking the form in the wild and valid

00:02:46

entered data, look here we have it

00:02:48

on facebook

00:02:49

because they are highlighted nothing red

00:02:51

because the page just loaded

00:02:52

we ended up only in it if I leave

00:02:55

first name red field like error

00:02:57

stood on these some icon appeared

00:03:00

here I'm coming back appeared who

00:03:02

melted zhko appeared here the piece of paper does not

00:03:05

appear look at the wrong email

00:03:07

but just like what I clicked this is an

00:03:10

icon, excuse me, it’s alloy, it’s also

00:03:12

somehow implemented, it’s no longer just an

00:03:13

input, and that means there are some icons near the input of,

00:03:15

at least before it’s laid out,

00:03:17

everything is like that, some sings appear from

00:03:19

the block, these are no longer just empaths, at

00:03:21

least the second ones they react for all sorts of

00:03:23

events in general, I would also say that the war button is

00:03:25

behind me, why is it needed here when you

00:03:28

can’t press it, you can press it, and then

00:03:29

highlight it again, choose something

00:03:32

custom to gender custom, cool, well, no, sign-

00:03:36

up synapses are moving towards this,

00:03:39

point it to highlight highlighted, we

00:03:41

need how - also model and, again,

00:03:43

if the writer is manual, then you

00:03:45

will simply be the inventor of your reader's form in

00:03:47

your library, the customer does not need to

00:03:49

upload a solution to business problems, and

00:03:51

forms are just a tool for working with the

00:03:54

forum, it should be for the

00:03:55

instrument that are already ready to be

00:03:56

connected to for your project,

00:03:58

accordingly, let's think about how to

00:04:00

do this for validation, first of all, who

00:04:01

will validate, look, let's go to

00:04:03

the documentation, go to the documentation, I

00:04:05

definitely hope you are the editor of

00:04:07

the documentation, these are all their deputies

00:04:08

looked at while there was a big break,

00:04:10

here there is Phil vomiting in people tires field

00:04:12

level or what's next for validation will be

00:04:14

specifically tied to a specific input

00:04:16

and the highlighting will be, roughly speaking, near

00:04:18

each specific import, so that there is

00:04:20

still a general validation for the form, let’s

00:04:22

say for example, we show here

00:04:23

in front of the Senate a general message like this

00:04:25

and it’s simply written there that it’s wrong, but

00:04:28

you must agree that such a highlighting

00:04:29

of the carriage specific in getting confused with the pl and

00:04:31

your k and with the icon is much

00:04:33

cooler, as it were, and more visual, so we

00:04:35

will look at field validation with you,

00:04:37

so in my opinion, such a

00:04:39

shock is adequate in relation to the user,

00:04:41

cool validation, respectively,

00:04:44

validation for us, look, if you go to

00:04:46

field validation, you will see that we

00:04:48

have some validators validator and

00:04:50

these are functions that check something the

00:04:52

input data check the input data

00:04:55

check and by the way max lance and we can

00:04:58

now just a second accent max VM-12 one

00:05:04

second more often now cool in short

00:05:11

validators functions square creation of

00:05:13

validators we immediately go to our project

00:05:15

open and open the heart the folder where

00:05:17

we will be validators wrote let's

00:05:19

create some separate folders

00:05:21

for example let's call the folder let's call it

00:05:25

strengthening utils for kills or helpers

00:05:31

huddled let's utils like we taught then and

00:05:34

let's add a folder here validators

00:05:37

validator why do I want to put this in separate

00:05:41

pieces before muscles for example we will

00:05:42

lead with you we will lead

00:05:44

with you for example this is this

00:05:46

stereo tag then what kind of validation

00:05:49

should be that the text of the era cannot be

00:05:51

empty if it is empty then we click on

00:05:54

this button and it should even be for the

00:05:56

design they have to be pressed, not to mention the fact

00:05:58

that the message is not

00:05:59

highlighted naturally, how

00:06:00

can you show a message here, well,

00:06:02

again, show the message, the dude was

00:06:06

doing something because he deleted the focus of the

00:06:08

bracket, there is no point in showing the message,

00:06:09

because well, the dude, maybe you just don’t

00:06:11

want to send a message to my

00:06:12

will show an error message,

00:06:14

so no matter what, it shows an

00:06:16

error message, but let’s analyze all these

00:06:18

scenarios down to the nuances, there are a lot of nuances,

00:06:19

and in real life there are a lot of nuances,

00:06:21

you can show an example, and then, as if in

00:06:24

real life, it turns out that it’s not like

00:06:26

dad, for example, life is more complicated in In any

00:06:29

case, a validator is something that is common, yes,

00:06:31

we can inflate the same validation there,

00:06:33

my Sitges has the same validation, similar

00:06:36

validation, the same validation, yes, that’s all

00:06:38

later, for example, we

00:06:40

go to the status here too, input is not at all,

00:06:43

too, Tory dax forms can be hung up, you can do

00:06:45

validation separately

00:06:46

this an empty field can generally prohibit the

00:06:48

status for now, but it is impossible to indicate enough

00:06:50

and how to make it so that the status cannot be left

00:06:52

unindicated, and accordingly, so

00:06:54

we bomb, so the validator, the

00:06:57

validator function should lie somewhere to

00:06:58

the side, let’s add

00:07:00

one file here now it was possible not to

00:07:04

create a folder, but nevertheless, let's

00:07:07

make an index Jesse, I'll show you this

00:07:09

thing, an index with, that is, we can

00:07:10

import a validator, or I've already

00:07:12

shown you, I'll show you again the gets index,

00:07:14

although here it's in the outcome of the cool

00:07:17

outcome, the folder is signed there,

00:07:19

but here it's not sign us if everything

00:07:21

is index dji ourselves, in short, we’ll

00:07:22

just die with you then let’s

00:07:25

make a validator after all, a validator and

00:07:28

let’s create with you the first validators

00:07:30

validator this function com’st for example the airat river

00:07:35

field a required field the

00:07:41

river oldfield this function which is

00:07:44

from then it will receive in Ilya I take parentheses and

00:07:49

this function should return

00:07:51

return if there is an error it should return an

00:07:54

error message error message

00:07:59

if there is no error the function should return

00:08:01

undefined return anda file no

00:08:06

match we check them we received it

00:08:08

in Ilya iv-v Ilya if in Ilya

00:08:15

there is

00:08:17

so far let's do it this way if I pour it out or

00:08:19

just and the purpose then we return

00:08:21

undefined

00:08:24

let's do it this way if there is no

00:08:25

currency before we return antifa ok

00:08:28

return undefined undefined

00:08:34

otherwise danube Odessa was not

00:08:37

returned here then otherwise

00:08:39

we return an error message field is

00:08:43

reek boiled field is river aired field

00:08:48

obligatory dripka river vai about whom I'm talking about

00:08:51

now Rick is cooking that's all and matter what

00:08:55

the validator can be attached to the form and the

00:08:57

form will react to it

00:08:58

as if we'll see how it will

00:09:00

react

00:09:01

let's start with you son my post sy

00:09:05

my post let's go you give among closable

00:09:11

post container my post

00:09:13

myself the guy already remember what we

00:09:15

were doing here, look we have a file d, yes,

00:09:18

for each such

00:09:19

input we draw a field, that is, a

00:09:22

component that draws a

00:09:24

specific one already in the picture there is a

00:09:26

text era input select and they kicked us out

00:09:28

get the exterior and we

00:09:30

hang this validator on this field whenever we

00:09:33

forget how to hang it and I now forgot, I

00:09:35

go to the documentation in the documentation, I

00:09:37

quickly look at it and see

00:09:38

validate, the validate attribute is hung and

00:09:40

all the validators that are needed in an array are transferred to it,

00:09:43

all the validators that are

00:09:46

needed by the

00:09:50

yt validator and I hang it validators kool-aid

00:09:55

bricklayer from feel the field I made Riku

00:09:58

Airat just let's regulate let's leave it

00:10:01

let's reduce the shorter in general the

00:10:05

better Riku Airat export I

00:10:08

export everything and go to our my post and

00:10:12

props alt-enter and in search you in

00:10:16

search y white

00:10:17

maximum length 15 ok let's

00:10:20

create a validator like this maximum

00:10:22

length maximum length for example 30

00:10:27

Riku Airat look at primax lance man's

00:10:31

land

00:10:32

look at max plank for example 30 hours and let's

00:10:35

talk a little about closures max and

00:10:38

30 comes to Ilya and we check if

00:10:41

I pour out a splint if Vilya is there and the purpose of

00:10:48

the link is yes, you are checking to make more than

00:10:50

30 then we return the error max Lawrence

00:10:55

max png of 30 symbols otherwise

00:11:02

we return here, on the contrary,

00:11:03

we return undefined

00:11:05

that is, we have it in the game if

00:11:09

you look to those valve may be an

00:11:10

empty string or may be in cash

00:11:12

then we won’t be able to take the lance from us,

00:11:14

there will be an error, although if we

00:11:16

use it in the forms,

00:11:17

we will most likely never have a signal and there will be an

00:11:19

empty line there, just so how

00:11:21

could this be a check from if you are

00:11:23

redundant here in general in life before remembering

00:11:25

this before quelli there is a need

00:11:27

to check the length, you know that I’ll pour out

00:11:29

may not be there, so it

00:11:31

would be useful to check that let’s remove it for now,

00:11:34

as if it’s superfluous if I pour out more than

00:11:37

30 then maxthon sisters symbols ok,

00:11:40

let’s immediately think for ourselves, but about

00:11:42

the closure, a super interesting topic to deny and

00:11:44

if we want 20 and if

00:11:47

in another place there is 50 and that we will

00:11:49

do such [ __ ] hawking

00:11:52

duplicate the code

00:11:53

and here we will duplicate the code

00:11:59

no, by analogy with the guys with the sled, we

00:12:02

will create like on the sled so that the sled can be

00:12:05

created, we create a scene creator

00:12:07

function which which what does it do

00:12:09

that returns the female to us and

00:12:12

transfers some data to it since the female is

00:12:14

fixed but she needs some

00:12:16

data from the outside

00:12:17

look like I’m a thing the validator

00:12:18

is fixed we cannot transfer this 30

00:12:21

along with the goal of the max type what is the

00:12:22

maximum length because we are not

00:12:25

we will call this function I will call the

00:12:27

reader of forms as well as the female herself who calls sang

00:12:30

calls well so many at home

00:12:32

dispatching amstor calls this sang

00:12:34

and it will go to the dispatch method in it we

00:12:37

therefore create with you max light creator

00:12:40

some kind of conditionally speaking max line year

00:12:46

export max plank

00:12:48

crater this is a function that returns, well,

00:12:53

let's do it as expected, also

00:12:56

here max and crater

00:12:57

you have this function that returns

00:13:00

another function just like a tank you think and

00:13:03

this is san creator

00:13:04

and this is max Lawrence creator who can

00:13:08

accept parameters for example max max

00:13:10

length length maximum and here we

00:13:13

will use the maximum length here I

00:13:16

told you about closures right now I’ll

00:13:17

tell you where this closure

00:13:19

exists here we have a closure this is when a

00:13:23

function returns another function and this

00:13:25

internal function can access the

00:13:28

variables that are in the

00:13:30

variables a parameter to the data that is

00:13:31

in the parent function in

00:13:33

this function, in fact, we can

00:13:36

create max, that is, the mouse, now to

00:13:37

get the validator we must call max

00:13:39

and the crater in front of it with the required length and

00:13:41

we will get back unique unique and a

00:13:45

validator with a unique value inside, that’s

00:13:47

all, and in the end, yes, if we need to, let’s

00:13:51

use the Riku validator aira type is a

00:13:52

required field

00:13:54

and the maximum

00:13:55

length, for example, there is 10, let’s do it so that we can

00:13:58

save time when typing, let’s go to

00:14:00

our my post Rick cook, we use it as

00:14:03

is, but we must call the Max Minsk Reuter, we must

00:14:05

call call and pass it, for example,

00:14:08

the value 10 alt-enter

00:14:11

that is, advertising read this is the validator, we

00:14:13

give it away so that the form reader itself calls it,

00:14:16

and Max Minsk Reuter

00:14:17

is the validator's cruter, that is, we

00:14:20

call it, it returns us the validator

00:14:22

retour there is no function and this function will already

00:14:24

call this function, the form reader will already call it

00:14:27

when it needs it, if we

00:14:29

did it right, then everything how

00:14:31

hands should be and how we can visually

00:14:33

see this, most likely through the fact that

00:14:38

our form will not

00:14:39

launch anything, we will press the button,

00:14:41

nothing will happen, we will not see

00:14:42

any message, well, most likely

00:14:44

nothing will happen, let's check the

00:14:46

error is super maximum update dex exit

00:14:50

you can happen company train the course

00:14:52

is on the site wow damn what did I do

00:14:54

I just called 2 validators

00:14:56

and off we go my student had this thing

00:14:59

and we had a long and interesting

00:15:03

look if and at the same time he advertises I’ll

00:15:06

leave everything for him it works, but with

00:15:09

our this thing it doesn’t work with this one,

00:15:13

you know what the reason is, most likely that

00:15:16

with each about each rendering, the max client crater

00:15:19

returns us essentially a new function

00:15:21

max like the rater returns us a new

00:15:23

function and, accordingly, somehow

00:15:25

compares this function and compares it and

00:15:27

it turns out nonsense, therefore, the creation of a validator in

00:15:30

this Max

00:15:31

Lensk specifically with

00:15:33

ten, we will simply take it outside the scope of the form,

00:15:36

here we will create a validator, we will call

00:15:39

it cashiers in the documentation in approximately the same way

00:15:42

they did, they separately call

00:15:44

not at the time of transfer, but call separately

00:15:46

this thing Max Lance creator and we say

00:15:51

years max payne 10

00:15:57

you created it here separately let’s not

00:15:59

give out accounts to use as if well

00:16:02

for me it’s not something worth

00:16:04

pursuing it’s like a favor yes there are things much

00:16:06

more important than using years and

00:16:09

consti there to properly monitor them all let’s

00:16:10

check everything it will be fine, everything is

00:16:15

fine, let's try not to

00:16:16

launch anything, press the button,

00:16:18

see nothing is fasted, that is,

00:16:20

don't bend the form, the bottom will be offended if

00:16:23

we get into handles admit handels one hour,

00:16:25

the form, this form is drawn in

00:16:28

my post, here is

00:16:30

the forum, here is the editorial britax form

00:16:34

here it’s through the vessels and we don’t even get in

00:16:36

and the bagheera is set, we don’t even get in

00:16:39

because the validator doesn’t

00:16:42

work, if I write one symbol, then

00:16:45

I miss, then dad got here and

00:16:49

this is the letter s, if I put

00:16:52

more than ten characters,

00:16:53

then again we don’t get in because

00:16:57

the validator works again yes, but we

00:16:59

want that with you, we want some kind of

00:17:00

visual feedback, that is, we want to

00:17:03

see that something is wrong and we still

00:17:05

start to think, damn, how can we

00:17:07

highlight this input, depending on the fact

00:17:08

that there is some kind of jamb in it that

00:17:10

is, it does not correspond to the room

00:17:12

rule of some rule on how to

00:17:14

do this, how to highlight it,

00:17:15

and we understand that, in principle, it’s not

00:17:17

as if we continue to plan to

00:17:22

use ordinary elements that we have as the final address of Vasya’s drawn form element

00:17:25

there is

00:17:26

exteria input and so on, we understand this, yes,

00:17:29

whoever was involved in a handful understand that

00:17:31

in fact, in order to make

00:17:33

the input beautiful, you also need to wrap it with some

00:17:34

girls with

00:17:35

some additional wrappers that

00:17:37

you are there where the pop-up message was

00:17:39

necessary to put a hidden span next to this item

00:17:40

something with some

00:17:43

specific classes and so on, you don’t

00:17:45

understand that there are a

00:17:46

lot of nuances and, accordingly, the same

00:17:49

thing is here, we need not just a text area, we

00:17:51

need some kind of sophisticated text, or

00:17:53

let’s create a sophisticated textview,

00:17:55

that is, create a sophisticated textarea,

00:17:57

let’s go here We have a folder for the MTS company,

00:18:00

we have a command folder there for common

00:18:01

components, there is a preloader, let's

00:18:03

write there forms for ms

00:18:07

in these capital letters forms controls

00:18:13

some kind of control and forms I'll

00:18:14

call it that way and let's

00:18:16

rivet ours here now these our these cool ones

00:18:20

things like this, for example, let's call the form also

00:18:24

about forums controls, I'll call the

00:18:27

inside a garden, such are the components,

00:18:30

for example, the text ere, but with a capital letter

00:18:32

the text ere, generally speaking in real life,

00:18:35

guys once again said, you

00:18:37

look, if you make a project from scratch,

00:18:39

you look at the layout design right away

00:18:42

isolate small bricks, small

00:18:44

bricks, in principle, I would

00:18:46

recommend you immediately remove small

00:18:48

bricks and start again depends on

00:18:50

building the entire project, then start

00:18:52

with these small bricks, create these

00:18:54

components which then you will simply

00:18:55

use the context of the era, this is

00:19:01

our component component function someone

00:19:03

accepts props and returns the same sex

00:19:07

return returns the same sex to the same sex

00:19:12

music to everyone at once we’ll take the girl to

00:19:14

this girl we’ll put the text in the era normal

00:19:17

text or

00:19:18

so and so we’ll do it look and the

00:19:21

elevator to the series you can’t do this in the downpour

00:19:24

most likely now what’s here

00:19:25

emphasizes ammonia you need to import

00:19:29

of course import react text

00:19:31

series

00:19:32

next we essentially create with you

00:19:35

some kind of container thing over the usual

00:19:38

text era and therefore there is definitely

00:19:40

a container on the component food utensils we

00:19:41

create a wrapper on only it will not give the

00:19:43

components above the element they give the element

00:19:46

but nevertheless we must give all the props that

00:19:49

come to us to the final end user

00:19:53

the text era, that is, to whomever the

00:19:55

user actually wants to see and

00:19:59

give everything the first step we have done, let's

00:20:01

export this texture right now, export let

00:20:03

's export this textview now, you'll drop

00:20:06

my post instead, let's say reactor act

00:20:10

instead ridak forms, please forgive me instead of

00:20:12

this text or the

00:20:14

classic small address and the

00:20:16

large textview, but when we

00:20:18

indicate here not the elements of the guys or

00:20:20

basic elements, but some

00:20:23

custom components of our own, then we must

00:20:25

indicate them not in quotes as a string

00:20:28

as a name of a function, that is, as a link

00:20:32

to a component as the

00:20:34

component itself, and now

00:20:40

our components will have to be drawn, so far everything is ok, but we’re

00:20:42

kind of hanging out and drawing, according to Kramer

00:20:44

read, if everything is ok, then

00:20:47

even this will work for us, but

00:20:51

it won’t work at all think why

00:20:53

let's think why or maybe there are also a

00:20:56

lot of characters and typed a deer of

00:20:57

course there to see 10 times two so

00:21:01

no it still doesn’t work I look in the

00:21:03

console what is written to us about this axis

00:21:05

in general we should get rid of it we’ll

00:21:07

fix it we’ll get rid of it I just don’t want it

00:21:09

to get rid of this in front of you, I

00:21:13

waste time in the background, I don’t want you to see

00:21:15

how I get rid of it, it doesn’t work super,

00:21:18

let’s see what we missed, what

00:21:22

happened, for example, here, that is, we

00:21:24

wrote the Kostanay component and the

00:21:26

component we wrote correctly for

00:21:27

the rest Not only that, he still

00:21:31

accepts props, all the professors are shrinking, they

00:21:32

accept, you also know what he is doing,

00:21:34

most likely he is most likely still, well,

00:21:39

he, since the traffic jam is throwing everything further,

00:21:40

we can even post in May, see my

00:21:42

post, pass it here, for example, placeholder

00:21:46

placeholder equals, for example, post massage

00:21:54

let's see if this placeholder will be displayed

00:21:56

here or if the postmaster will not be

00:21:58

displayed but here guys another

00:22:00

point

00:22:01

another point is that in fact, with

00:22:08

this text era,

00:22:11

the father worked directly with the editors of forms before directly working with

00:22:13

our text or with our component and

00:22:16

here it is, that is, yes it transfers to

00:22:18

our component there all sorts of flask quiche

00:22:19

val bakes, that is, this cycle of flag

00:22:22

scoop values and so on, and here it’s

00:22:24

like the props are not completely an abyss, in

00:22:25

fact, the developers of the reader forms even

00:22:27

called this thing not

00:22:30

a component, but called it, as it were the method

00:22:32

was called render

00:22:34

these render now render the field

00:22:36

render field and here now there are some

00:22:39

things that

00:22:42

type type input 1 cube come to life

00:22:49

hang it or who you look like I’ll

00:22:51

show you so that you understand what we’re talking about

00:22:53

why it doesn’t work let’s look at the debugger

00:22:55

let’s put it here now let’s put the debugger

00:22:58

and we’ll see that the form reader is trying

00:23:00

to draw and in traffic jams in the matrix infantry,

00:23:02

with other ghosts, it happens that

00:23:04

he throws in input metadata and a

00:23:07

placeholder ps holder ourselves for the sandal

00:23:09

or that’s why the placeholder is here and my thief

00:23:11

got shriveled up and was taken away, but everything else

00:23:13

everything else seems to be no good, that is

00:23:16

input is more accurate like everything else if only but

00:23:19

we can’t unpack rub what we

00:23:20

do we detail all the props and

00:23:23

add to the text Irina text Iria

00:23:25

texture and don’t need input text era don’t

00:23:27

need meta you know to the thing they don’t need

00:23:31

under don’t need meta accordingly Wingo

00:23:33

that is name he has all sorts of

00:23:36

events that should get here we

00:23:38

need to destructure not all props

00:23:39

but only props but only input under the

00:23:42

input object on yes di structure

00:23:45

accordingly let's where to

00:23:46

structure not all outflow props

00:23:49

input is sitting in traffic jams input just yet

00:23:54

why I will teach you look at the hour it

00:23:56

will already work hey-hey-hey this post

00:24:00

and I was in a hurry it still doesn’t work,

00:24:05

no big deal we’ll figure it out this is

00:24:08

very cool and very interesting so

00:24:12

placeholder render field in path

00:24:17

instruct input type indicate type

00:24:21

indicate type placeholder label

00:24:24

method without holder label look, the

00:24:28

props thing before the placeholder did not appear, but

00:24:31

now because we have a placeholder

00:24:33

sitting in fact, you are in traffic jams, they are in their

00:24:37

path and the placeholder is a sister dog, they are in the

00:24:39

input and therefore am the end of the structuring

00:24:42

ENP did it, but not the structure access

00:24:43

robes of we are not

00:24:45

maybe there are extra people sitting in traffic jams here, what should we

00:24:48

do? In this case, it would be ideal to

00:24:50

make a rest operator, that is, we know

00:24:53

what comes to us in traffic jams, what

00:24:55

comes to us in processes, let's install

00:24:56

the debugger again and see what comes to us

00:24:58

in traffic jams, now we delete

00:25:02

the page, we see that in traffic jams there are

00:25:04

guys coming there, this is a very important topic

00:25:06

now related to the development of

00:25:08

container components with the development of a

00:25:11

hack there in the future, if only our own, and so

00:25:13

on, that is, this is an important topic, the matrix

00:25:14

or put my to-do that placeholder, that is,

00:25:17

we need to exclude skin on our board all

00:25:20

the props because we understand the placeholder

00:25:21

must convey the type, we can also convey

00:25:23

the clear ones, so the rest of the elements that are

00:25:25

standard for what you are looking for for these control

00:25:28

of the type text exteria type they would you and

00:25:30

so on, we don’t know what will be here,

00:25:32

so we have to get it from saw samples, as it were

00:25:34

input and meta

00:25:35

go structuring all the remaining

00:25:37

props for this the 3rd st operator will help

00:25:39

we say that we want input before the

00:25:43

input structuring stage we want to get de

00:25:47

structuring meta

00:25:52

and we want and we want the remaining all the

00:25:55

things left in traffic jams that is the props

00:26:00

will now contain everything except input

00:26:02

has and accordingly we destructure

00:26:07

input and do not completely structure

00:26:09

props because there is no more room in the processes

00:26:11

and input ugh if this is a difficult place for

00:26:13

pirates, please google

00:26:15

restructuring the rest operator separately

00:26:17

please google this topic, this is

00:26:19

very, very important and now everything should be transferred in theory

00:26:22

input as it should be, well again, for some reason, but

00:26:25

no, it works, it even works, you know,

00:26:27

after that, it even earned people

00:26:31

here characters,

00:26:34

yes, he’s asking for everything, okay, super, and

00:26:37

let’s check that if we do

00:26:39

n’t have anything, too, as if it won’t start, it won’t

00:26:42

start, nothing to fast super, that

00:26:44

is, to finalize it, but our guys are already

00:26:47

drawing not just text and Rio is drawing

00:26:50

just such a thing and this is what to

00:26:52

submit, I’ll create a css somewhere here I’ll

00:26:55

put this

00:26:58

css class I’ll call it forum control module

00:27:02

css module add it to the repositories

00:27:11

there this is a css module here I will declare a class

00:27:13

for our elements for example forms on the

00:27:17

legs there are forms of control

00:27:18

with this sound with a ladder there in my opinion something

00:27:22

like this forms control

00:27:26

forum control now I’ll think about it, let me, well,

00:27:29

I’m interested error before make an error

00:27:32

error if there is an error then for input and

00:27:39

which lies in this for input swelling

00:27:44

stereo input and now for input and now

00:27:47

we do this for input and for with 100

00:27:51

there k would say would use yes you

00:27:53

could use but also text

00:27:56

text era for input then in short, well, do it for

00:28:00

example border border color 1 pixel

00:28:07

red solid in general the order should be

00:28:10

correct for these structures but

00:28:12

still the usual way the racks work is

00:28:15

cool here it is solid solid

00:28:19

right one pixel and so we need more does it

00:28:21

really emphasize because of this

00:28:26

border sorry border color border I'm

00:28:30

just stupid so great, we have

00:28:34

a class and now we need to attach these classes

00:28:36

somehow, let's try for now

00:28:38

just like not informing control,

00:28:39

well, in general, if the form is like that, in general,

00:28:41

probably in a minute, we will

00:28:44

then attach control forms if inside the

00:28:48

forms there is a control and we have a form forms of control

00:28:51

there is an error class and inside you then like this

00:28:53

or attach it like this with

00:28:58

classic complexity and so on, although there

00:29:00

would be methodologies there now everything is

00:29:01

a little different, but we will do it like this, it’s

00:29:05

cool, we also catch that the

00:29:07

class is cool, sorry I call for a,

00:29:12

excuse me, we also have this style of forms,

00:29:16

only control forms, yes, I again blunted

00:29:19

the hyphens, you can’t use them because

00:29:21

then it won’t be convenient for us to

00:29:22

use control forms there, so this one was

00:29:26

given so far for control forms and control forms,

00:29:31

and you need to import this impulse.

00:29:34

import import styles

00:29:40

from

00:29:44

from forum control it's all gone and

00:29:47

let's add here additional

00:29:51

give I'll do this quickly

00:29:54

additionally styles terror let's see

00:29:58

if the red border appears whether it

00:29:59

appears the red border is super super well,

00:30:02

you must agree that it

00:30:07

disappears when I click the mouse on this it’s

00:30:09

just a focus there, but it doesn’t disappear,

00:30:11

let me let you understand that it doesn’t

00:30:13

disappear, I’ll

00:30:14

add it to the error class, I’ll add two

00:30:18

pixels of thickness, it won’t be noticeable,

00:30:22

so let’s also add spam like with an

00:30:25

error, an error message from the sponsor

00:30:28

control, there may be

00:30:30

an error sitting there and maybe spam that will

00:30:34

show some kind of error color

00:30:37

color red color red excellent red

00:30:46

error text in red Spanish let's

00:30:48

add Iria under the text let's add

00:30:54

hater they'll shine on me and I'll

00:30:59

wrap everything in gifs I'll make this structure

00:31:01

and at the bottom I'll make a span

00:31:07

span there will be an error message

00:31:10

some kind of mistake itself error itself error yours

00:31:15

only like the text it’s just they’re like that the

00:31:18

pen

00:31:20

spread you some kind of mistake the very rubles

00:31:23

for of course terrible colors blue backgrounds well

00:31:25

this should push you to make

00:31:27

your own unique design for this movement

00:31:29

itself some kind of mistake it’s clear that the error

00:31:31

should not pop up, the appearance of the

00:31:33

class should cling only when

00:31:35

there is an error and this spam should be on

00:31:39

day 2, too, only when we have

00:31:41

some kind of error and here is a super mega

00:31:43

question for the guys, that is, how do we know that

00:31:45

we have some kind of error

00:31:46

and we remember that the whole cycle

00:31:48

is controlled by the reader of forms, the library of text

00:31:52

or these are our components that the reader

00:31:54

forum essentially controls and

00:31:55

manages and so on the forms are smart, the reader of the form

00:32:01

on meepo hung on this field

00:32:03

validators and the reader of forms in this our

00:32:07

text or will send a message

00:32:09

if suddenly something went wrong and we

00:32:11

can find out about it while inside our

00:32:13

form, now I’ll open the documentation,

00:32:15

look at it comes to us in the meta in the marks,

00:32:19

we’ll get an error and a warning,

00:32:22

let’s take the error field, the

00:32:25

error field, that is, look at me too, such a

00:32:28

general method with methods then data is

00:32:30

metadata, then data about data, that is,

00:32:32

we had the data we needed, and there is also

00:32:34

metadata, some additional

00:32:35

data that was sort of sold, let’s say

00:32:37

so, but validation is about the same thing,

00:32:40

validation is data of entered data,

00:32:42

this is when there is such a thing as metadata

00:32:45

then here in the meta sits the error properties

00:32:48

and if it exists, let’s do this

00:32:51

if there is an error then show spam,

00:32:56

otherwise don’t show spam and we

00:32:58

will see that after reloading

00:33:00

the page the span remains why

00:33:06

because formally there is an error there is a

00:33:08

validator takes values, it is empty,

00:33:11

it says in values, empty, but it’s as

00:33:13

if we haven’t entered anything yet, it doesn’t count as

00:33:15

an error, remember with Facebook, example

00:33:16

remember, that is, you need to sort of check

00:33:19

up or touched this input, did we touch

00:33:22

it, did you try, were we there, were

00:33:24

we in it for this purpose in the metadata there is

00:33:27

another property called

00:33:28

seems sharpens cars touch give sharpens

00:33:31

look sharpens everything is correct and we check

00:33:35

if this input if this this text era

00:33:39

if this element was touched sharpens and

00:33:44

meta

00:33:45

error and then they the error then return

00:33:49

betspan look now there is no SPO,

00:33:53

let's do the same thing with the backlight of the

00:33:55

class with the backlight of this one with the

00:33:57

backlight of the 3g border, do we have an error

00:34:01

or not an error, the same thing here

00:34:02

we will add this style only on the condition

00:34:04

that we have an error so as not to write

00:34:06

again such a long condition, I will

00:34:08

now put it

00:34:10

in the variable konce TV show error

00:34:16

capricorn capricorn I will

00:34:23

use here to abbreviate my capricorn

00:34:26

if there is an error show this thing and is there an

00:34:28

error here then show

00:34:33

the error otherwise show a long time ago add

00:34:36

the void now in brackets here so let’s

00:34:41

look at it, it’s

00:34:43

still cool, as soon as I make it here

00:34:46

and leave, an error will appear,

00:34:48

spam will appear like the most roaring error, and in

00:34:51

the case of texts, and here for a post it’s not

00:34:54

very relevant because think about it, you’re

00:34:56

just sitting there, poking the whole page, I’ll add something like

00:34:57

that something, no, I won’t write, I

00:34:59

left the page, she’s telling you that

00:35:01

you have an error, what the hell is this,

00:35:03

so here we kind of need a more

00:35:05

king

00:35:06

tuning setup, this is beyond the scope of this right now,

00:35:11

right here in our junior

00:35:14

100th cycle, because otherwise we simply won’t

00:35:16

have time for the entire base about about the sausage with you,

00:35:18

but again, these are actually nuances

00:35:19

that you will already be pumping up in your work,

00:35:21

there are things that are more important that you still do

00:35:24

n’t need to understand in order to participate in a

00:35:26

big project at all, so that’s about

00:35:28

everything, okay, let’s check, let’s

00:35:30

start

00:35:31

something, because the error has disappeared remove

00:35:32

the error appears now I'm leading de

00:35:35

characters appears error

00:35:36

nose moror some error on I would like to

00:35:38

know what kind of error and this

00:35:40

error is sitting in our message

00:35:42

meta

00:35:43

error the text of the error that was returned by one

00:35:46

of the validators will be sitting here in this

00:35:49

message error so instead of the error itself

00:35:52

we show the meta

00:35:55

error look oops we're leaving phil didriku

00:36:00

airat max lance here there is a symbol with

00:36:04

cool cool

00:36:05

let's do the

00:36:08

same with and do the same with and well here

00:36:13

to work for ds manager

00:36:14

sending a message ok but here it's like we

00:36:17

have already done the main piece with you

00:36:19

component what is such a component why

00:36:21

react is a component because a

00:36:22

component is the building blocks we

00:36:24

can then assemble a large structure from them

00:36:26

so the same thing here we are going to May

00:36:28

Sitges my messages

00:36:30

now we are Sitges mss forms here we

00:36:35

created with you and here, too,

00:36:38

instead of text or regular, we will

00:36:40

use our texts Rio with a capital

00:36:43

letter, which is a component on alt-enter in

00:36:47

certain and we will also add

00:36:48

validators here, the same validators that

00:36:50

were there Vali deyt here we pass the axes of

00:36:53

the validators the

00:36:54

river Airat alt-enter

00:36:57

in certain imax lance the maximum length of

00:37:01

the message, for example 100, we remember that the

00:37:03

max lance is created using max

00:37:05

and is created using the

00:37:07

creator validator, so to speak, and

00:37:10

you need to create it outside the form, otherwise

00:37:12

there will be cyclicity, in short, everything

00:37:14

will break forms controls

00:37:16

May ask to excuse the forms and we will call

00:37:20

it here and say extends for example 100

00:37:23

for I don’t remember the length on the server from

00:37:25

the general construction message to the message

00:37:27

sending personal messages we’ll move on with

00:37:29

you after lesson 100 because the topic is

00:37:32

quite a centurion, well, how complex it is there

00:37:37

are nuances due

00:37:38

to the fact that the api is max tens const

00:37:42

max lance that is, I repeat, yes, the

00:37:45

closure works here 50 max and crater we

00:37:48

call accent crater and pass the

00:37:50

parameters to this function 50 max and crater

00:37:54

returns to another function and this

00:37:56

other function will be available this 50 this is

00:37:59

50 since for example from the parent

00:38:00

function a and b this closure works the

00:38:02

child function that was spat out by

00:38:03

the energy function having access to the

00:38:05

parent element on my channel I’m talking

00:38:08

about the closure

00:38:09

very, very soon some kind of video I’ll also

00:38:11

write down cool, not because closure

00:38:13

is the topic of the native java script

00:38:15

that you guys absolutely need,

00:38:18

we all use name is dat ar here

00:38:23

we are going to check we are deleting we are going now I will

00:38:32

update the page of your plugin

00:38:35

some kind of redirect happened now the

00:38:38

country is not working it just had to

00:38:41

work on its own we will now look and

00:38:44

ladies sex forum one of the validate forms

00:38:49

maybe his people should have and we but now

00:38:53

my post is valid t-max lance array of field

00:38:59

forms now guys I love it when it doesn’t

00:39:02

work because there is an opportunity to

00:39:04

tell you something I’ll help dad think

00:39:07

a little here

00:39:09

they tell someone not saved it’s just

00:39:11

all this forum control I

00:39:18

honestly don’t understand what’s the matter first thing

00:39:21

that I’ll check this right now

00:39:23

and see if that one was added to pour

00:39:25

exteria, this exteria is a wonder without classes,

00:39:29

although the form class control should have

00:39:31

been years Mr. forms bath and send

00:39:39

wait, let’s write here

00:39:41

because it’s as if I’m in some other place

00:39:42

text series component that

00:39:45

imports forms controls now I'll

00:39:48

update the page

00:39:49

damn it again Henry directed son of the door this

00:39:52

and hasn't changed why because

00:39:54

maybe I didn't finish this form

00:39:56

interesting and Dmitry form and massage for

00:40:00

die dax forms this place is now Oltov

00:40:02

one where we are in dialogues this is the

00:40:04

master of forms dialogs

00:40:09

this and this massage form is another

00:40:11

local one, we put it in a separate one

00:40:14

and this

00:40:15

and here is the same redox that this is probably me

00:40:17

when the guys the world lived there versions I

00:40:20

messed up accordingly we have a local one

00:40:22

here this is a readak of forms and it is used by

00:40:24

them that I am decorating now, so

00:40:27

I am removing from here this should not be

00:40:29

this bench was sorry for the extra

00:40:34

fuel material think in short and references

00:40:36

compliance I import the reader of forms and

00:40:38

this master of forms is not exported more often

00:40:42

right now from the master of forms from miss forum

00:40:45

we wrap it up to the editors and by default

00:40:47

we export this master of forms

00:40:49

this massage forum should let’s do

00:40:53

it without the reader’s words that here, in essence,

00:40:56

we don’t care how inside there is this form of a

00:40:58

manager who controls it, so yes we

00:41:01

export by default the formal one from the

00:41:03

master of forms here we are we export

00:41:06

our form wrapped with hok, so everything

00:41:11

works fine here, we move away from excellent,

00:41:15

we will reduce 50 characters max and 50

00:41:19

characters philby said a series of super on

00:41:22

validation works well, and the last thing we

00:41:24

did with you is we will do the same

00:41:26

validation on the login form in the next

00:41:29

release we will do full moisture

00:41:31

ice on this poster of dax forms as if we’ll

00:41:33

leave it alone and on the next one

00:41:35

we’ll do the sending of the real login and

00:41:39

there already then kicked that is, for real

00:41:41

de baby and on the server and already there and already

00:41:44

there we’ll then do it also reset there

00:41:46

a couple of lines of code, as they wrote to me in the

00:41:48

comments, reset the form to 0 but well done,

00:41:50

before you google it yourself again

00:41:52

guys, do the movement and I’ll also keep something special so that

00:41:54

you

00:41:56

google it at least a little because in

00:41:58

real life guys there won’t be a video of

00:42:00

Dimych you soar to the company all these for

00:42:02

the project go damn you see Dimych’s video,

00:42:04

look at it, it’s not there, so friends,

00:42:07

let’s go back to the login request form,

00:42:10

what a nuance there will be, we did

00:42:12

n’t use the stereo input tag here and we

00:42:14

want again some

00:42:16

fancy input of our own and we go and we go here

00:42:19

again, we go here, we copy this

00:42:25

text to the era for now, we don’t pay attention to the

00:42:27

duplication of code, then

00:42:29

we’ll figure it out and make some kind of our own with a

00:42:31

capital letter input with a capital letter

00:42:33

instead of text and draw input and essentially

00:42:36

leave everything as is, I don’t like it

00:42:39

terribly I really don’t like this duplication of code, I

00:42:41

really don’t like it,

00:42:48

but we’ll find out what to do later, but for now we’re just

00:42:52

glad that this should also

00:42:53

work automatically for us, that is, these

00:42:55

highlighting errors, and so on we go to the

00:42:57

form lagin of vagina forms, we use input

00:43:01

capital letters, an important point, again,

00:43:03

quotes we select the quotes mind we remove so

00:43:11

here type checkbox and here input we

00:43:19

all look at what won’t happen in an hour they will

00:43:22

define this alt-enter we import and dad

00:43:27

check

00:43:28

we have there if I’m not mistaken in 12 the

00:43:33

submission happens in the 12v console just

00:43:36

check that everything works everything works

00:43:37

let’s do it validation, what if an

00:43:39

empty field like highlight in red,

00:43:41

let's now put

00:43:44

some departure prices and rules on each field, well, let

00:43:46

's put valley here, go

00:43:50

array Rick Warren for now and the clairs

00:43:55

will be enough, the acquirer will

00:43:58

check the dad, we'll leave another field philby

00:44:02

charge, too, the password itself, let's make it

00:44:05

awesome in my opinion, it’s very awesome,

00:44:08

think of this logic, write it yourself,

00:44:10

write it yourself, write it yourself, it’s very

00:44:12

interesting to write this logic yourself,

00:44:13

but it’s very useless for real life,

00:44:17

everything here, too, we’ll delete everything, the backlight is in progress, the

00:44:19

backlight is super, that’s what you need, that’s what you need, that’s what you

00:44:24

need, friends,

00:44:26

okay, let’s do it so that there is

00:44:29

more benefit, let's try this

00:44:31

thing sometime, you and I cesare factory dawn

00:44:34

factory there for us the form of controls

00:44:35

code duplication is essentially everything

00:44:38

changes the same only this is the

00:44:40

middle and-and-and-and-and-and what do I need I want

00:44:45

to do I want to do I want to

00:44:52

do just such a component now

00:44:55

let’s remember about child with thoughts they

00:44:57

were dismantling when we made the context when from

00:44:59

the context and drink

00:45:01

with you we studied there we forgave a little

00:45:04

talked let’s look we will all

00:45:05

export for example m forum forum

00:45:10

control exporting more precisely we won’t

00:45:12

because it is not designed for export,

00:45:13

although for tests t1 forum

00:45:16

control some component that

00:45:18

accepts props

00:45:19

and returns makes this noise thing

00:45:26

makes this whole thing and returns now the

00:45:28

probe arrow forgot yes, but here instead of

00:45:32

text era and and instead of input or maybe someone whatever about

00:45:37

the category I don’t know to do because

00:45:41

child husband there child we draw were in the act of

00:45:44

how we draw child and there we draw

00:45:46

just a test with the child and he automatically

00:45:48

draws himself ana mandara he still has

00:45:50

some props to transfer now let’s take a look, wait

00:45:53

react and look at what Google is

00:45:57

judging about what don’t give now dad to

00:45:59

the slow one, that is, I don’t want

00:46:01

exteria counters to be here, I want

00:46:03

props child to be displayed here in traffic jams,

00:46:09

some child who will come here

00:46:11

who will additionally sit in traffic jams

00:46:13

child, by the way,

00:46:16

here we also need tut.by

00:46:17

structuring do

00:46:18

otherwise we will have a small

00:46:20

problem to

00:46:22

and here the same hour child or child let

00:46:25

's check

00:46:26

child and in the processes the

00:46:28

properties of child can sit this is when it will

00:46:30

sit there when we use

00:46:32

when we use our

00:46:34

component our component and in it a miracle

00:46:37

to convey, look, in the end, we have a

00:46:39

standard situation, we

00:46:41

have two identical pieces of code that are similar and

00:46:44

we create a third piece that will

00:46:46

be like a replacement for these two similar

00:46:48

pieces, that is, we need to remove the

00:46:49

duplication of code and we, accordingly, yes, here it is,

00:46:52

duplication is the difference these two

00:46:54

pieces in this middle and we

00:46:57

replaced child in this middle this is

00:46:59

something that comes into the component here

00:47:02

look what we do we say that

00:47:03

we have the texts of the series we have it it

00:47:06

receives props it does nothing it

00:47:10

just returns it simply returns

00:47:14

forum control forum control another

00:47:16

component, that is, in fact, it is but

00:47:20

the control form, you see, we will not be

00:47:22

closing the samcontrol itself,

00:47:23

how much you need to remove, but it will be

00:47:26

opening, opening, it says

00:47:28

that we can put something inside

00:47:29

and this control form is more like -

00:47:34

close the form control if it needs it,

00:47:36

then these internals will be displayed and in

00:47:38

our case we should put

00:47:43

input here, we should put one under

00:47:48

look here now texts and there the text

00:47:51

ere like this, let's do it this

00:47:52

way so we should put the text ere

00:47:55

okay, let's duplicate it a little the code for

00:47:56

a little bit of text still

00:47:58

turns out better text or that is, we from the

00:48:02

rice forms control and pass

00:48:04

chill inside to the child text iriya and

00:48:08

control forms, in fact, this is all this

00:48:09

game with logic

00:48:11

and what is child iriya this is a text series this is

00:48:17

child forms control and don’t forget

00:48:20

to pass all the props that came to us

00:48:22

because we are again

00:48:24

some text era is now a Kama

00:48:26

container over the forms control wrapper I

00:48:29

just miraculously additionally

00:48:30

configures this this this container

00:48:33

let’s say that’s all and in their way we do the

00:48:35

same

00:48:37

intrigue he too the very thing is that we replace

00:48:40

this bunch of code with one line and

00:48:44

instead of text or here we write in

00:48:47

pat just like that, it’s better that nothing

00:48:50

came to mind, but we will see that

00:48:52

instead of two identical

00:48:54

pieces of code we now have one such piece and

00:48:56

some two wrappers that we need to give

00:48:59

forms with control have appeared, it’s already

00:49:01

a little bit of guys to do it by analogy,

00:49:03

the ability to do it by analogy, it’s very

00:49:06

cool

00:49:07

to fight, the control works cool, it

00:49:10

means a sign that you can move

00:49:12

on, how long has it been recorded in time, it’s been going on for

00:49:15

so long I

00:49:17

haven’t written down for so long that I miss this

00:49:19

topic so much that’s why I’m tormenting you for so long, well, no

00:49:21

big deal, you’ve been waiting for this, so

00:49:23

let’s see what doesn’t work and

00:49:26

input and define this is a forum control with

00:49:29

line 17 input is not defined

00:49:31

a input of course because these input of there is

00:49:36

no text here in this era

00:49:37

ok let's do it this way we'll write

00:49:40

here samples son here like this but I don't want to

00:49:45

duplicate this logic for this whole thing

00:49:47

so I don't like this solution

00:49:49

that we both are forced to

00:49:51

set up the textiles ourselves good luck I was

00:49:53

dissatisfied with the text or set it up

00:49:54

yourself by passing all these things to her

00:49:56

in traffic jams, there’s immediately a lot of unnecessary stuff and

00:49:58

it turns out that it’s not like I wanted to

00:50:03

look at the child row,

00:50:06

but to do the guys, we can do it,

00:50:12

climb into such a pattern, as it were, that

00:50:15

is, we will pass it on as a reader of forms, we

00:50:17

will pass it on, that is, I I don’t want to

00:50:18

do this duplication, I want it here I

00:50:24

want it to have text or an anchor with a

00:50:27

small letter, you can pass the text

00:50:29

element call by call look what I

00:50:31

want I want here I don’t need to

00:50:34

pass anything inside that is, we

00:50:37

won’t use child we will

00:50:39

use the fact that I don’t want this person to

00:50:40

set up here too, I want the setting to

00:50:42

be here, so

00:50:46

I won’t draw child here, I’ll

00:50:48

draw some kind of component element

00:50:51

that will come to me here and it will also come to me

00:50:53

in traffic jams I

00:50:55

’ll call the element its element is the final

00:51:00

element that needs to be drawn, let's see if it

00:51:01

will work this way or not,

00:51:03

respectively, in traffic jams, just put

00:51:05

this element here element equals here

00:51:09

we have textarea text and I don't know the text or

00:51:13

is it just a hint,

00:51:17

let's see I don't know, even interesting such

00:51:21

things are here input

00:51:26

so guys, this is a slightly

00:51:30

more complicated topic, maybe you

00:51:33

wouldn’t even need to tell me, or that

00:51:35

everything will blow your mind and then we

00:51:36

often won’t make money, I won’t

00:51:38

poke around any further, you’re reading this, it was a gift for you

00:51:40

to think about who who is stronger and

00:51:43

propose a solution write in

00:51:45

the comments what solution you have

00:51:48

there, that is, do not take the text elements

00:51:49

pass by reference element these

00:51:51

elements would be this component

00:51:54

could be transferred from here we conclude how can

00:51:57

we

00:51:58

solve this situation it’s easy for them we can

00:52:02

damn it no it’s not easy now how to put

00:52:05

now let's see react child how to put

00:52:10

samples props photo late that area

00:52:14

component of the tea stopper chiltern excellent

00:52:16

blah blah blah says that we have a span

00:52:20

item render function render function

00:52:24

link from these spans now taken from these

00:52:27

spans draw the browser like props once

00:52:33

restructuring Dion consumer here is a sample

00:52:36

children children in general children should

00:52:41

be children can pass cola for render

00:52:46

fans and tagged for attacks children

00:52:49

text children so clone children

00:52:56

element props element props

00:53:03

children clone element so not such a

00:53:07

quick solution not such a quick solution so so so so

00:53:10

so

00:53:18

children turret clone element case with my

00:53:28

friends my friends my friends in short I

00:53:30

can’t solve that problem so quickly and it

00:53:33

depresses me

00:53:34

no it doesn’t depress me we can’t transfer the texts to Rome

00:53:38

until like how how like harm kfor

00:53:40

we transfer the text to Iria it’s just

00:53:41

more difficult then to write often an implementation

00:53:43

that will work with this element is more

00:53:45

difficult to create elements no longer with the

00:53:47

help of gsx, but here I am already using the help of a

00:53:49

gift, but it’s like the technology is not for not

00:53:53

for you guys not for genies not for the

00:53:55

first in the first 100 issues so

00:54:01

that’s why okay we suffered we suffered the

00:54:07

spiders didn’t do anything, let’s do it all, but somehow the cat

00:54:09

will shrink, that is, I return it as it was, that

00:54:11

is, anyway, this is some

00:54:14

improvement of the code, that is, what am I

00:54:16

doing now? I props

00:54:18

here are input and props should be received by removing what is

00:54:22

not needed for this, I will do

00:54:24

something like this here a restructuring thing like this,

00:54:28

I’ll do this, I’ll do this, I’ll do this beyond

00:54:30

the frames of course duplicating the code, damn it, the

00:54:33

final thing doesn’t like it, okay, let me do it like this, well, so

00:54:40

write extra damn it, I’m saying this here

00:54:45

props

00:54:47

and here I’m trying in a rest props rest

00:54:50

will skip the residual props that

00:54:52

remain residual skip I throw all the

00:54:55

processes here and throw the forum control

00:54:57

well, what are these quick lines I

00:54:59

have to duplicate, well, nevertheless, this is still a

00:55:02

definite gain, that is,

00:55:04

now we are finalizing the form of the

00:55:06

highlighting error, a beautiful style, we

00:55:08

only work with this in a place it’s all

00:55:10

kind of hardcoded

00:55:12

me the child rest props and this test is

00:55:15

also a sample, throw it here ok, let

00:55:17

’s check that it’s started, it’ll work,

00:55:19

it’ll work no, because at 10 you

00:55:22

just need to leave the copybooks here, just

00:55:26

the props so impad disappeared, but because I

00:55:32

removed the child, I didn’t want children children

00:55:35

here so everything about the texture is displayed

00:55:40

because here the textarea here the input

00:55:42

should hit them like our design

00:55:44

control everything rock and roll empty empty

00:55:50

fill in empty

00:55:53

uhh uhh uhh uhh uhh uhh uhh uhh uhh uhh the

00:55:56

guys have such a topic yes there is something to

00:56:00

think about on your own while I

00:56:02

I’m going to be stupid with the next video

00:56:03

myself, look at children

00:56:05

working with black on the transfer of

00:56:07

these complex korbut nesting of children

00:56:10

chiltern there are props

00:56:12

detailing rest operator read about

00:56:15

all this you should know clearly and well

00:56:16

guys understand magic doesn’t happen

00:56:18

in Washington it happens just by walking

00:56:21

with me 100 issues is not yet a guarantee

00:56:22

of your employment, we must not

00:56:24

just go through with me, do it by

00:56:26

analogy, you must be able to do it yourself,

00:56:27

everything I do here, you

00:56:29

must be able to do it yourself,

00:56:30

understanding until, accordingly, without

00:56:32

repetition, it will install everything, I delete all

00:56:34

social networks, I do it again, I do it again, I remember

00:56:36

as Dimych told me, I understand everything as it

00:56:38

was there and now I’m going again, that is, the

00:56:41

understanding of the Ridak guys with the understanding of react

00:56:44

and this is super important on the same

00:56:46

circuit, in fact, you may not

00:56:47

fully understand how it works, I just

00:56:49

understand that, well, how it works, but how is

00:56:50

it there what happens with this vocabulary choice by the

00:56:53

cops transition yes I don’t care how

00:56:55

you care the main thing is to understand how to do it by

00:56:57

analogy so that it works how

00:56:59

to wrap a female in a san trader how

00:57:01

to wrap validators the validator creator is

00:57:06

tired I thank you very much for

00:57:09

the comment thank you very much for the donation and

00:57:11

thank you very much for the movement for Kim before

00:57:15

and already on Tuesday or Wednesday there will be a

00:57:18

cool interview with my friend Kiril,

00:57:21

who was a military man,

00:57:22

started a very java script, won a green

00:57:26

card, flew to the states there, studied,

00:57:29

studied, studied, and in short, right now he works there as a

00:57:32

junior and a cool interview there, we

00:57:34

just talk in a friendly way,

00:57:36

talk in various topics, I tried,

00:57:37

of course, to give some kind of structure to this interview with a

00:57:39

certain

00:57:42

storyline, as if development and we will be there to

00:57:43

give away prizes for you, the

00:57:46

book is more relevant there, well,

00:57:49

in short, I will be glad if

00:57:51

you watch this interview, then write your brother miss

00:57:53

part as much as you like like

00:57:58

more places

00:58:01

[music]

00:58:04

learn do was cry

00:58:07

get a job not too old believe me

00:58:15

not yet pose

00:58:18

[music]

Description:

🚀Стань квалифицированным разработчиком за 9+ месяцев с трудоустройством в IT —INCUBATOR: Front-end https://it-incubator.io/front-end Back-end https://it-incubator.io/back-end Поддержать меня можно на patreon https://www.patreon.com/itkamasutra или оформив спонсорство на данном канале. Помогайте друг другу вот здесь: https://t.me/reactjs_samurai API: https://social-network.samuraijs.com/ Валидация, проверка введённых пользователем данных, обратная связь для пользователя в виде подсветки ошибок и текста ошибки!!! Всё это ОЧЕНЬ важно. Писать свой велосипед ЗАПРЕЩЕНО в реальной жизни - это расточительство бюджетов компании и заказчика. А вот заюзать уже имеющиеся инструменты - это круто! Летим!!! Создадим с вами функции-валидаторы - функции, которые принимают значение на входе, а на выходе возвращают либо undefined (если значение прошло валидацию, то есть значение корректно), либо "текст сообщения об ошибке"; А чтобы красиво отображать сообщения об ошибке и вообще как-то стилизовать элементы с ошибкой, создадим вокруг обычных элементов input и textarea свои контейнерные компоненты, в которых помимо этих примитивных элементов будут ещё и элементы, которые будут отображать текст ошибки если нужно, а так же добавлять к элементу css класс! https://redux-form.com/8.2.2/ Летим, самураи!!! Уроки по React JS: https://www.youtube.com/playlist?list=PLcvhF2Wqh7DNVy1OCUpG3i5lyxyBWhGZ8 * Сайты: https://it-kamasutra.com/ https://it-incubator.io/ https://samuraijs.com * Мы в соц. сетях: https://vk.com/itkamasutra https://www.facebook.com/unsupportedbrowser https://telegram.me/itkamasutra * Мои личные VK и Insta: https://vk.com/d.kuzyuberdin https://www.facebook.com/unsupportedbrowser

Preparing download options

Popular

HD video

Only sound

All

* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."

** — Link intended for online playback in specialized players

Questions about downloading video

How can I download "77 - React JS - redux-form field validation (валидация, ошибки). Осторожно Замыкание!" video?

http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.
The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.
UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.
UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.

Which format of "77 - React JS - redux-form field validation (валидация, ошибки). Осторожно Замыкание!" video should I choose?

The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.

Why does my computer freeze when loading a "77 - React JS - redux-form field validation (валидация, ошибки). Осторожно Замыкание!" video?

The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.

How can I download "77 - React JS - redux-form field validation (валидация, ошибки). Осторожно Замыкание!" video to my phone?

You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.

How can I download an audio track (music) to MP3 "77 - React JS - redux-form field validation (валидация, ошибки). Осторожно Замыкание!"?

The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.

How can I save a frame from a video "77 - React JS - redux-form field validation (валидация, ошибки). Осторожно Замыкание!"?

This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.

What's the price of all this stuff?

It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.