In this video we are going to learn state.
React components has a built-in state object.
The state object is where you store property values that belongs to the component.
lets add state into the component.
So go to project.
and just go inside the Post component just add here state as following.


import React, { Component } from 'react'

class Post extends Component {
state={
name:'Jennifer',
age:25
}
render() {
return (
<div>
<h1>This is Post Component.</h1>
</div>
)
}
}

export default Post;



Now access this state into component render So here.
Inside the curly bracket Just write as following.

import React, { Component } from 'react'

class Post extends Component {
state={
name:'Jennifer',
age:25
}
render() {
return (
<div>
<h1>This is Post Component.</h1>
<p>Name: {this.state.name} </p>
<p>Age: {this.state.age} </p>
</div>
)
}
}

export default Post;


Now save it and lets check it.
So switch to the browser and here you can see the name and age inside the post component.
We can also add an array inside the state.
So for adding the array just write.


state={
skills:['react','javascript','html']
}


Now print this array inside the component render.
So just type inside the render return.


<p>Skills: {this.state.skills} </p>


Save and let see the output You can see here the skills.
Now lets separate each skills with comma.
So here just use the join function and pass comma.


{this.state.skills.join(',')}


Now save the file and lets check.
Now you can see the array elements are showing comma separated.
So in this way you can use state in react component.