The goals
💪🏻JSX Limitations & Fragments
✌🏻Getting a Cleaner DOM with Portals
👍🏻Working with Refs
Even we can just use [] and inside put them with "," still it works.
But in this case, since it's an array, we need to put "key" here
So this is the reason we prefer using dynamic syntax to other ways.
It can be a little dirty trick but we can make an empty component which just return children and wrap out composition
Even sometimes it normally works, still it doesn't mean that it's a good code.
We don't want our modal to be structured like this deeply.
So in this case, we can use 'portal'.
To use portal, we only need two things.
First of all, we need a place we want to port
Second, we should let our component know that we have portal
So basically we separated our modal in two different variables.
Because it will make portal work much easier!
react-dom is kind of adapter for react to the browser.
Since we only worked for the backdrop we can only see backdrop now
Refs
References but the name in React is just ref, so the short form of reference.
Refs are actually quite powerful as we will se throughout the course.
Let's go to the AddUser component again.
There we have out inputs and we manage what the user enters by simply keeping track of it.
We simply have our state and with every keystroke, we update our state.
So with every keystroke we update the value we get by the user and we store it in our state and we feed that state back into the input.
and then we use that state later on to reset the inputs but also to send it to the place where we need the data.
But updating the state with every keystroke when we only need it when we submit the form sounds a bit redundant.
And that's one of scnarioes where refs could help us.
It should be inside of functional component.
It takes a default value we wanna initialize it but we don't need it here.
It returns a value which allows us to work with that ref later, so which allows us to work with that element to which we are going to connect it.
And we can let React know that we wanna connect this Ref to the html element
So here now we connect things together.
And let's check what 'ref' has inside.
For that, we can try 'console.log()' in our 'addUserHandler', then we get some content like below picture.
If we access to it like 'console.log(nameInputRef.current.value)' then we get the value we put in our 'input' tag.
So we don't have to read every key stroke, we can just submit and get the final value of it.
so use const variable to allocate the value of input tag and then we don't have to find the value of input since we already know through 'ref' we can remove it
And when we set it those value as empty value since we already submit it we don't have to use State, but we just can use ref. -> simplify code
So these key stroke state can be gone!
It's up to us which way we prefer between useState and useRef
But in this case we are not controlling these inputs with React, since it's just regular DOM element.
We are getting value of it using DOM element and put the value of it in const variable.