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

In summary it can be said:

• props - inherited values
• state - dynamic values

The concept is: state should serve to store values / states of the application that change with the use of it, to save a state change that can have effect in the rendering of the component itself, be passed to a child component as prop , or that must be passed to something external to the application. The props are static values, or that in the context of a Component are static, hence they are props and not state to separate conceptually.

state can be imported from props into the Component, but can not 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><scriptsrc="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
• display

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

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

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

Notes:

a) In cases where application data is managed externally (by external libraries such as MobX or Flux variants), state must be limited to UI state actions and changes, not application data.

b) It is possible to set the state from outside the Component but it is anti-default, so I do not refer to the example.