What is the difference between props and state in React.js?

Question

What’s the difference between props and state in React.js, what differences and how they should be used?

Answer 1

In short, one could say:

• props - inherited values
• state - internal values of the component

The concept is: state shall be used to store application values/states that change with the use of the component, to store a status change that may have an effect on rendering the component itself, to be passed to a child component such as prop, or that should be passed on to something external to the application. The props are static values, or that in the context of a Component are static, hence props and not state to conceptually separate.

state may be imported from props within the Component, but cannot be inherited from the parent component.

Example:

class Mostrador extends React.Component {
  render() {
    const frase = this.props.valor ? 'O valor escolhido foi o ' : '...nenhum valor escolhido...';
    return (
      <p>
        {frase}
        <span>{this.props.valor || ''}</span>
      </p>
    );
  }
}
class Botao extends React.Component {
  render() {
    return (
      <button  type="button"  onClick={this.props.onButtonClick.bind(this.props.nr)}>
        {"Eu sou o botão nr: " + this.props.nr}
      </button>
    );
  }
}
class App extends React.Component {
  constructor(){
    super();
    this.state = {
      escolhido: 0
    }
  }
  handleClick(nr) {
    this.setState({escolhido: nr});
  }
  render() {
    const botoes = [1, 2, 3, 4].map(
      nr => (<Botao key={nr} nr={nr} onButtonClick={this.handleClick.bind(this, nr)}/>)
    );
    return (
      <div>
        <h1>Clica nos botões!</h1>
        <section>
          {botoes}
        </section>
        <section>
          <Mostrador valor={this.state.escolhido} />
        </section>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

html,
body {
  height: 100%;
}
body {
  background: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Helvetica Neue;
}
h1 {
  font-size: 2em;
  color: #eee;
  display: inline-block;
  text-align: center;
  width: 100%;
}
button {
  margin: 5px;
  padding: 5px;
}
p {
  margin-top: 1em;
  text-align: center;
  color: #aaa;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></app>

The logic of the example is:

• Parent component (App)
• n buttons
• dial

The parent component App works as a controller. It keeps in its state the state of which the chosen number, and also has the function called when the button is clicked. The state is dynamic because it changes value each time a button is clicked.

The component Botao is a simple button. He does not inherit anything from state of App. the corresponding number is stored directly in the .bind() of function handleClick. The only thing he inherits is a pointer to the function to be called when he receives a click.

The component Mostrador inherits the state of App, and uses it internally as prop. So, every time state of App change, the React.js calls the render() of App that passes the state.escolhido at the Mostrador as prop, prop.valor. This number is then used in the .render() of Mostrador.

---

Notes:

to) In cases where application data is managed externally (by external library such as Mobx or Flux variants) the state should be limited to actions and changes of UI status, not application data.

b) It is possible to set the state outside the Component but it is anti-standard, so I do not mention in the example.