train

#8 Try REACTjs Tutorial - Toggle Content with State



Sharing buttons:

in this one we're gonna toggle content

using state and this will also teach us

a little bit more about reacts state or

how the components work with this

concept of state okay so what I want to

do is open up post detail and I want to

make sure that my app jeaious does have

my post list in there so it looks like

it did before we did that last one okay

cool so what I'm gonna do now is I'm

gonna make a button that is inside of my

render action and then when I click that

button it's gonna toggle whether or not

my content actually shows so I'm going

to go ahead and put this button in and

we'll say toggle content display okay

and like we did with our title we can

make a click event and I'm gonna go

ahead and grab this bind method and

instead of this title was clicked we'll

just go ahead and say toggle content

okay cool so we've got our method named

but we actually have to create the

method so toggle content and this is an

event passes an event and we want to

prevent the default especially when it

comes to a button right and now that we

have it bound these things will work

just fine the next thing is all we have

to do is on click this dot toggle

content cool so we now have a way to do

all this if you've watched this whole

series you would see that you've already

done this so how do I actually toggle

this display well what I can do here is

say Const and show content equals to

true right so with this show content

variable I can actually come in here use

curly brackets show content equals

equals to true then we'll do that

content otherwise we'll just leave it

empty and there's my condition inside of

the render method this is my condition

right here sure you could use this for a

different class or you could do all

sorts of things in here right so let's

let's just show you what I mean by that

so if I did this as a class

I would cut this out and say class name

equals to use those curly brackets again

some ticks and then inside of there we

add this same method here and we'll do

display block this is a bootstrap thing

or the CSS bootstrap but really this is

all about just showing you how to

actually render this out you put a

dollar sign there and that's how you

would toggle or that's how you would

initially set up the toggle of a class

cool and of course you'd get rid of this

too okay so but what the thing about

this is is it actually renders out that

content right so that content is still

on the HTML page

where this right here won't actually

render out that content at all it won't

be inside of that HTML page you won't

show up unless we do something new okay

so a manual way of rendering this is

changing that to false so true and false

just kind of going back and forth and

what do you know that contents there but

if I click this button nothing happens

so what I want to do is have this change

this so how do I actually do that

well to do this the first thing I knew

is on my constructor is say something

like this that's state equals to the

name of the variable or the item that

we're gonna be calling it this is

arbitrary I'm calling it what I want so

by default in that constructor by

default I'm saying show content being

true so that means that this show

content here could use those curly

brackets again and now instead of false

we just say this dot state and that

map's this variable to this one again if

you change those you have to change them

much like what we saw with the props so

this is where it seems like these things

could be confused alright so one is

state related one is related to what's

gonna happen to a button eventually and

then the other one is related to the

actual parameter that's on the item here

right so these are props here where a

state is inside of that single component

okay so now what we need to do is we can

check this save it and what do you know

there it is it's actually showing up and

again if I change

- false it will rerender and there it is

okay so the nice thing about this too is

that's how you can share variables or

data throughout your various items here

you can actually use it with state

obviously you can use it with props as

well because we did show you virtually

how you do that but you can use it with

state and that will show you for that

one single component and now we can

actually reference this and we just say

set state and show content and I'm gonna

initially just say false right so we

have it the default show says true and

then we just are gonna toggle it to same

false so we save that and I click on

this what do you know hey just this one

component toggles right so that's

another aspect of the state it's it's

related just to that one component where

the prop might not do it that way if you

change the prop on the ListView which

you could do right so you could do this

same exact thing with state on these

components here we'll talk about that

some other time but for now we see that

oh I was able to change the show content

on one single thing but I'm actually not

toggling it I only just remove it so to

actually toggle it all I need to do is

say the inverse of this dot state dot

show content so whatever the opposite of

that is it's going to show it so if i

refresh in here i toggle it and what do

you know it's actually toggling that

content okay cool

so you could say something like Const

and this dot state like that alright so

there we go we're now sharing that same

variable in there and just do this right

so that will that well that should work

as well so if i refresh in here it does

cool so those are two different ways on

how you can go about doing it this this

is actually writing more code than you

really need so that's why I left it as

this that state that show content right

it's a lot cleaner but it's important to

know that those things work so let's say

you toggle content using

State or toggle anything really using

state and hopefully you can now stop and

play around with how you make change

this Tuesday

we still have another video on state

coming so make sure you subscribe to get

everything

thanks for watching see you next time