Props vs State in React

State

Like props, state holds information about the component. However, the kind of information and how it is handled is different.

function Welcome(props) {
return <h1>Hello {props.name}</h1>;
}
class Button extends React.Component {
constructor() {
super();
this.state = {
count: 0,
};
}updateCount() {
this.setState((prevState, props) => {
return { count: prevState.count + 1 }
});
}render() {
return (<button
onClick={() => this.updateCount()}
>
Clicked {this.state.count} times
</button>);
}
}

Props

What does “props” even mean?

props are passed into the component

Here’s an example:

class Welcome extends React.Component {
render() {
return <h1>Hello {this.props.name}</h1>;
}
}const element = <Welcome name="Sara" />;
function Welcome(props) {
return <h1>Hello {props.name}</h1>;
}
class Welcome extends React.Component {
render() {
return <h1>Hello {this.props.name}</h1>;
}
}Welcome.defaultProps = {
name: "world",
};

Conclusion

While props and state both hold information relating to the component, they are used differently and should be kept separate.

--

--

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