React Props/State for beginners

What are Props?
Props allow you to pass various types of values into our components. These values can be numerous types of data: strings, numbers, arrays, objects, and even functions.

Example
For example lets say we are making a page that has a component. This is an example of a hardcoded component.

class HearthStoneCard extends React.Component {
  render() {
    return (
      <div className="hearthstone-card">
        <h2>Dr Boom</h2>
      </div>
    )
  }
}

Passing in Props

Now if we wanted to create more HeartStone cards it would be very time consuming to create a new component for each one. Instead we create our components with the ability to use props which are passed down from their parent component.

To pass props to a component you add them as attributes when you render them.

data.js

const hearthStoneCard = "Dr Boom"
<HearthStoneCard name={hearthStoneCard} />

If you are rendering in a class you would pass the props using the this keyword and the props keyword:

HearthStoneCard.js

class HearthStoneCard extends React.Component {
  render() {
    return (
      <div className="hearthstone-card">
          <h2>{this.props.name} </h2>
      </div>
    )
  }
}

Now having a card with only the name on it is a little boring. Lets add some more traits:

data.js

const hearthStoneCard = "Dr Boom"
const attack = 7
const defense = 7
const battlecry = "Summon 2 1/1 Boom Bots. WARNING: bots may explode"
<HearthStoneCard 
name={hearthStoneCard} attack={attack} defense={defense} battlecry={battlecry}
/>

Now we can render those trails in our component.

class HearthStoneCard extends React.Component {
  render() {
    return (
      <div className="hearthstone-card">
          <h2>{this.props.name}</h2>
          <h4>{this.props.attack}</h4>
          <h4>{this.props.defense}</h4>
          <h4>{this.props.battlecry}</h4>
      </div>
    )
  }
}

Our code now is much easier to read and we can easily produce multiple HearthStone cards without having to write a component for each one.

Default values for Props
Now imagine in the process of rendering HearthStone Cards you come across a card that you cannot find an attribute for. To solve this we can tell our HearthStoneCard component to pass in a default attribute whenever one is not available.

HearthStoneCard.defaultProps = {
name: 'Demon',
attack:1,
defense:1,
battlecry:'Deal one damage to a minion'
}

Now when we omit one of our props we will use the above default props instead.

What is State?

Props are great but what if you need data that can change constantly.For props to do this the parent component would need to send new data and the entire component would need to remake itself. There has to be a more efficient way and this is where state comes in. State is data that can be changed in your component (unlike props).

To show how state works image we are starting a new HearthStone app where we can increase the attack value by clicking on the card and increasing the attack value by one.

To start we need to set the initial state. Here we will set our attack to 0.

class App extends React.Component
    state = {
        attack: 0,
    }
}

Next we will write a function that will increase our attack

increaseAttack = () => {

}

Now to increase our attack we are going to use a React built in function called setState.

 increaseAttack = () => {
   setState({
   attack:this.state.attack + 1
 })
}

class App extends React.Component
    state = {
        attack: 0,
    }
}

 increaseAttack = () => {
   setState({
   attack:this.state.attack + 1
 })
}

  render() {
    return (
      <div onClick={this.increaseAttack}>
        {this.state.attack}
      </div>
    )
  }

Now when you click on the screen the attack number will increase by 1. This is all done easily with the magic of state.