diff --git a/README.md b/README.md index 1635502..48c15b3 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/). For a steady stream of TILs from a variety of rocketeers, checkout [til.hashrocket.com](https://til.hashrocket.com/). -_603 TILs and counting..._ +_604 TILs and counting..._ --- @@ -422,6 +422,7 @@ _603 TILs and counting..._ - [Accessing Env Vars In create-react-app](react/accessing-env-vars-in-create-react-app.md) - [create-react-app Comes With Lodash](react/create-react-app-comes-with-lodash.md) +- [Defining State In A Simple Class Component](react/defining-state-in-a-simple-class-component.md) - [Dispatch Anywhere With Redux](react/dispatch-anywhere-with-redux.md) - [Force A Component To Only Have One Child](react/force-a-component-to-only-have-one-child.md) - [Inactive And Active Component Styles With Radium](react/inactive-and-active-component-styles-with-radium.md) diff --git a/react/defining-state-in-a-simple-class-component.md b/react/defining-state-in-a-simple-class-component.md new file mode 100644 index 0000000..17ec771 --- /dev/null +++ b/react/defining-state-in-a-simple-class-component.md @@ -0,0 +1,50 @@ +# Defining State In A Simple Class Component + +Most class components start off with a constructor which does some +initialization of the component including setting the components initial +state. It might look something like the following: + +```javascript +class MyComponent extends React.Component { + constructor(props) { + super(props); + this.state = { + loading: true + }; + } + + render() { + if (this.state.loading) { + return ( +

Loading...

+ ); + } else { + // ... + } + } +} +``` + +If setting state is the only thing you need to do in the constructor, +then you can skip the constructor all together. + +```javascript +class MyComponent extends React.Component { + state = { + loading: true + }; + + render() { + if (this.state.loading) { + return ( +

Loading...

+ ); + } else { + // ... + } + } +} +``` + +This second example will work the same as the first, and it is a bit more +concise.