loading...

React Props/State for beginners

scdan0624 profile image SCDan0624 ・3 min read

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>
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

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} />

Enter fullscreen mode Exit fullscreen mode

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>
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

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}
/>
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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'
}

Enter fullscreen mode Exit fullscreen mode

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,
    }
}
Enter fullscreen mode Exit fullscreen mode

Next we will write a function that will increase our attack

increaseAttack = () => {

}
Enter fullscreen mode Exit fullscreen mode

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

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

Enter fullscreen mode Exit fullscreen mode
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>
    )
  }
Enter fullscreen mode Exit fullscreen mode

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

Discussion

pic
Editor guide