Почему не перерисовывается компонент?

Question

[qfrontend]

Приветствую) Почему не перерисовывается компонент?
В консоли видно что при нажатии на сундук меняется state родительского компонента "Content", так же видно что меняется props.text дочернего компонента "Message" , но не меняется его состояние state.text ... Почему, что не так? Помогите плиз

import React, { Component } from 'react';

class Message extends Component {
  constructor(props){
    super(props);
    this.state = { text: this.props.text }
  }
  render() {
    return (
      <div className="message">
        <p className="message__text">{this.state.text}</p>
      </div>
    );
  }
}

class Chests extends Component {
  state = {
    not: "Не тот сундук ",
    yes: "ОТличная интуиция! "
  }
  render() {
    return (
      <div className="chests">
        <div className="chest" onClick={()=>{this.props.changeMesagge(this.state.not)}}>
          сундук1
        </div>
        <div className="chest" onClick={()=>{this.props.changeMesagge(this.state.not)}}>
          сундук2
        </div>
        <div  className="chest" onClick={()=>{this.props.changeMesagge(this.state.yes)}}>
          сундук3
        </div>
      </div>
    );
  }
}

class Content extends Component {
  state = {
    text: "Угадай в каком сундуке Аркана?"
  }
  changeMesagge = (value)=>{
    this.setState({ text: value })
  }
  render() {
    let { text } = this.state
    return (
        <div className="content">
          <Message text={ text } />
          <Chests changeMesagge={ this.changeMesagge } />
        </div>
    );
  }
}

export default Content;

Answer 1

[Дмитрий]

Потому что конструктор вызывается только при создании компонента, а не при его перерисовке. Вам не нужно в message переводить props в state, какой в этом смысл, если он все равно приходит от родителя и меняется в другом компоненте?

При рендеринге просто пишите
<p className="message__text">{this.props.text}</p>

Answer 2

[dev null]

Дмитрий всё верно написал. Добавлю лишь, что если по какой-то причине вам нужно держать text в state компонента Message, то для того, что бы он ререндерился после изменения пропсов изменяйте state в componentWillRecieveProps или можете добавить ключ этому компоненту:

<Message 
key={text}
text={ text }
 />

Comments

[yanis_kondakov]

Дополню, что сейчас componentWillRecieveProps перешел в версию UNSAFE. На его замену пришла другая логика с использованием getDerivedStateFromProps