Now moving ahead to Conditional Return.

We will see what is conditional return and that we will do

some condition-based return. We now have, ‘The logic for filter in the same component, is not
recommended.’ We are adding the logic of the filter to one component and maintaining one
component only. But ultimately, we will not keep just one component. Here, the logic of filtering and
the logic of showing up are all clubbed at one place. And here you can see my app component
became a little complex. The concept of single responsibility that we usually follow has not been
followed here. That concept could not be maintained here. That’s the reason we will split up
something. Adding single responsibility, putting everything in a single component is hence not
recommended. We will add a component for it and we will name it as subscriptionList and shift all
the logic in that component and add the CSS file. Ultimately, we have to add another file in the
subscription folder whose name is SubscriptionList dot JS and along with it lets makes its CSS file also
because all of our styling will be added in this class itself. Okay, subscriptionlist dot CSS, dot JS and
now we will form a function in the subscription list whose name will be kept same as the component
name ‘SubscriptionList’. Here we are adding some arrow function and we will export them, ‘export
default SubscriptionList’. Okay, the date has been imported from here which we do not want
anymore but we want to import the subscriptionlist CSS file because here whatever class will be
used, should all be present in that file. ‘SubscriptionList dot CSS’ and here I will keep some return
statements as well since ultimately, I will be returning one component from here. Okay, now we
have prepared the base here. Now why have we created this component? You know the reason. In
the app, we have kept all the template making logic and we have done everything required for
filtering. Now the ‘Handler’ that we have added is important too. The filter data that we have made
is also okay because this is uncontrolled component. We have kept all the logic in this which is okay
but we don’t want to keep template related logic here. We can make a controlled component/dumb
component to keep the template related logic even if all of this logic shifts. The logic of iterating,
logic of making condition based templates and which template is to be put on which condition, all
these logic that will be used in the JSX, will be shifted to the dumb component. Ultimately,
SubscriptionList is a dumb component which will get something some data in props. When we will
pass on some data in the props, the data will be passed from ‘App dot JS’ and all this return logic will
be shifted there. Lets shift this. There is a way to optimize this too but first of all lets shift this one
itself. We will keep this much logic written. And we will get in props here. We will not get filter
subscriptions. We will get list or I may say subscriptions from the props. ‘Props dot subscription dot
length’ and here I will use ‘props dot subscription’ instead of ‘filter dot subscription’. And ultimately
we will return this content. Now the content that is returned here, we will have to use it in this
application component app component. So we will replace this variable with new component, with
custom tag . ‘In the place of variable, we will use tag for newly created component and we will pass
some data in the properties of this component. So first of all lets use this which is SubscriptionList
and we can also close it here. Now see the subscription date has come here. Has the subscription list
been input? No, so we will do the input here too because we are using it out of the file. So it is
necessary to input for it to be accessible. ‘Subscription slash’, since we kept it in the subscription
folder. Here we are importing SubscriptionList. And we have to give some data in the tag we have
used here. We will define a property named subscription because we have used subscription in
SubscriptionList. I will assign this data to someone. Now I do not want this thing so now I am
changing it to comments only and not totally removing it. I am keeping all these commented for you
to refer when you will download the source file and see. You will understand how have we shifted
things and what changes have we got between the initial and the final stages.

So the filtersubscriptions are not being used anywhere but I want to pass it to SubscriptionList
because this is my dumb component which doesn’t have any logic. This is only being used to create
template which means it is presentational component. And the App JS will be our controlled
component which is stateful component where there are multiple states for maintaining data, for
updating them and for doing filters and transformations. So this forms our stateful component. We
are getting the filtered data that we had just passed in the SubscriptionList. Now lets see in the
SubscriptionList. We have shifted all the responsibilities for now. Now we will have to import the
subscription here since we are going to use it here instead of the app. So here we will import the
subcscription from Subscription. Okay, I have to write ‘from’. We had skipped ‘from’. Now if we will
see here, we are getting some errors. This error says that, ‘Objects are not valid as a React child.’
Here we are sending it in the object format. This is a child. It’s the child of App JS. SubscriptionList.
And here something will be written as object which is not a valid syntax. We had shifted all the
responsibilities but there is something that we need to do in SubscriptionList dot JS. We cannot
handle it this way. So we will have to change the way. Our approach will change a bit. And we will
add some condition in the return itself. So first of all, if we write our condition in ‘if’- props dot
subscription dot length is equal to is equal to zero, then I will have to return ‘h3’ instead of ‘content’.
H3 with No data found’ and we will end h3 here. Else what I have to do? If this ‘if’ condition doesn’t
hold true then I’ll have to return something else which is our whole function. The map function we
have, all of it would be called. I’ll add this whole thing here. So now our return statement has
become condition based. Now I am returning my return statement correctly. If I have to return this,
then I am already checking and returning only h3. If I have to make a list then I check the condition
first and then returning the list. Now in this I want to make a little changes with the UI perspective.
I’ll make this ul return a list with some class ‘list’ and I’ll add this map function within it. The function
will end here. Our ul tag will end here. As you all know that format we write in is of JavaScript and
whatever code we are writing is being understood by JavaScript and not by JSX which is why we will
enclose it in curly brackets. In the return tag also, I am adding a class in the h3 tag just for styling
since I want the styling to be nice. ‘List_no_date’ , ok. I am defining some of my classes like this. The
ul will end here. Our starting and closing bracket to start and close in the correct sequence otherwise
there it will show an issue of syntax compile error. So ultimately we have removed the logic from
here too. We cannot use such logic because we cannot store content in a variable and use it in a
child component. We will have to make return, condition based. Ans since we had added some
classes here, we have to define them in .css as well. So first of all we will define .list . I have not put
much styling. You can change the style or the class name. I’ll take padding 0. And our .list_no_data
we will keep its colour black since our background is white. We will centre the text align and then we
will see how our styling is applied. ‘List_style’, and we have already used both these classes in .js .
Now we will run it and see if our function is running. OK, length of undefined SubscriptionList. One of
the lengths in the SubscriptionList is undefined. It is because the property that we have taken here is
subscriptions and not subscription. You see, doing naming convention carefully is very important.
These kind of mistakes can give us errors. Now you can see I have added some more styling. Now
our actual output is running successfully and its showing no data found where there is no data. I
have centred the text align with some styling. I have made the ul list’s list type and padding none.
Here we can change the styling. But you know here we have split this and the way it had become
more complex is now split up and nice and simple. And now we are just calling another component
in our main component where our template will be rendered. Along with the split up we have seen
another thing here that we return condition based statements only and not the already made
templates. So this a very important concept where we have to use conditions and if the conditions
are not forming in one component then we will split up and get the if condition for return checked.
So now my ultimate goal has been achieved with different approaches. We have seen four
approaches till now. First we saw how to work on iterations. Then we saw how to filter using
the .filter method. Then we cleared out how to handle conditions using ternary operator. And finally
we learned the significance of && operator and how we can split up the ternary operator. We also
saw how we created and maintained a variable named content and only used that variable here. And
finally we did the split up, created a component named Subscription that is responsible for rendering
the lists which is a dumb component and wrote a condition based statement after forming a
condition. These were the things relevant to conditions and iterations and we already discussed
many things and their alternatives. Then we will return the JSX based on the condition. Yes, we have
covered all the points of this. Now next topic is adding handlers and along with adding handlers we
will see in details what things can be improvised and how to enhance certain functionalities , in the
next video.