React. js-Explaining Props and State

What is state?

It is a special built-in object of React that allows components to create and manage their own data.

class Example extends React.Component {
state = {count: 0}
render() {
return (
<div>
<p>{this.state.count}</p>
</div>
)
}
}

How to update state?

A state can be updated using the method setState() .

class Example extends React.Component {
state = {count: 0}
increment = () => {
this.setState({
count: this.state.count +1})
}
render() {
return (
<div onClick={this.increment}>
<p>{this.state.count}</p>
</div>
)
}
}

What are Props?

Props are short for properties and they are used to pass data between components.

How to pass data with props?

Here is how you pass props:

class Parent extends React.Component {
render(){
return(
<Child name={"first name"}/>
)
}
}
const Child = (props) => {
return <p>{props.name}</p>
}
<Child name={"first name"}/>
return <p>{props.name}</p>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store