Props

props are passed into the component

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",
};

props should not change

State

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>);
}
}

state is created in the component

constructor() {
super();
this.state = {
count: 0,
};
}

state is changeable

updateCount() {
this.setState((prevState, props) => {
return { count: prevState.count + 1 }
});
}
// DO NOT USE
this.setState({
count: this.state.count + 1
});
render() {
return (<button
onClick={() => this.updateCount()}
>
Clicked {this.state.count} times
</button>);
}
this.state = {
count: 0,
};
Clicked {this.state.count} times
onClick={() => this.updateCount()}
this.setState((prevState, props) => {
return { count: prevState.count + 1 }
});
Clicked {this.state.count} times

Should this Component have state?

Component types

Review

--

--

--

fullstack dev in your service's

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

You can embed Observable cells in Medium (with interaction)!

Write Delightful Declarative JavaScript

person working at a laptop

How to create a file in a SharePoint 2010 Document Library using JavaScript

Reactivity in F#

How the browser renders the website page

Playing Fetch, But Not With An Animal

Client-Side Rendering vs. Server-Side Rendering vs. Pre-rendering

How to Use the Composition API to Get Data from Service with Vue.js

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
oussama soui

oussama soui

fullstack dev in your service's

More from Medium

The Storyteller by Dave Grohl

“I miss the old me.”

Max Scherzer Wins In Mets Debut, Obi Toppin A Career Night For

Do Students at the University of Nevada, Reno even know what ASUN is?