Preview
Video Player
00:00
00:00
New Return Types
4:54React 16 no longer requires that a render method returns a single React element. You can render multiple sibling elements without a wrapping element by returning an array. This eliminates the need for an extra element just to wrap your component tree. The other new return types React 16 supports are strings and numbers.
React 16 supports new return types
that let you render less DOM nodes.
0:00
For example,
0:04
React no longer requires that a render
method returns a single React element.
0:05
You're able to render multiple sibling
elements without a wrapping element,
0:11
by returning an array.
0:15
In my project,
I'll create a file named JSTeachers.js.
0:17
Here I'll import React from react and
0:24
I'll create the JSTeachers
component with const JSTeachers.
0:28
Then export it with export
default JSTeachers.
0:41
This component will return
an array of list items.
0:47
So let's add return,
followed by an array, and
0:50
inside the array I'll
add three list items.
0:55
The first one will be Treasure,
1:00
After that I'll add a list item for Guil.
1:07
And a list item for James.
1:16
Now since the function
is returning an array,
1:20
you should give each item in
the array a unique key prop,
1:23
otherwise React will display
a console warning about key props.
1:27
So I'll give the first
list item a key of 1,
1:32
The second one a key 2,
and the third the key 3.
1:38
So, now I can render the list
items returned by JSTeachers
1:44
inside another component
alongside other list items.
1:49
So, for example inside Teachers.js,
1:53
I'll import JSTeachers
with import JSTeachers
1:58
from JSTeachers.
2:03
Then in the return if I include
the JSTeachers component
2:07
anywhere inside the UL,
React merges them inside the same list.
2:13
So if you have a look at the output
you'll see that the resulting DOM is a UL
2:19
with all the teacher names.
2:24
And just like any functional component
created with an arrow function,
2:33
you can simplify the function
by using an implicit return.
2:38
Now let's look at another example of
how React can return multiple sibling
2:53
components via an array.
2:57
In app.js I'll change the component
return statement to an array.
2:59
I'll delete the parent App div.
3:09
Then return the Header with the key head.
3:15
The Teachers component with the key teach.
3:25
And the Footer component
with the key foot.
3:31
And since we're returning an array,
3:39
make sure you add a comma
between the components.
3:41
Again notice how the array lets us
return more than a single component.
3:45
No need to wrap them in a parent element.
3:51
The other new return types React 16
supports are strings and numbers.
3:54
In the Header component, for example,
3:59
I can return a string without having
to wrap it in a paragraph span or div.
4:02
Or it's valid to return just a number,
for instance, 2017 in the Footer.
4:16
And since I'm just returning a string and
a number from the functions, I'm not using
4:25
any JSX, I don't even need to import react
in the Header.js and the Footer.js files.
4:31
The components will still render, so
as you can see, eliminating divs or
4:40
any extra element added just to
wrap your React component tree or
4:45
returned content leads to overall
cleaner and smaller components.
4:49