Реагируйте js, состояние не будет обновляться с моими утверждениями if и else

Question

Консоль просто продолжает регистрировать BOOM VOOM? есть ли причина для этого, или он просто не распознает строковое значение, я новичок в JS и реагирую.

constructor() {
  super()
  this.state = {
    message: "CLAY"
  }
}

changeMessage = () => {
  let mm = this.state.message
  console.log(mm)

  if (mm = "CLAY"){
    this.setState({
      message: "BOOM VOOM"
    })
  } else {
    this.setState({
      message: "CLAY"
    })
  }
}

Answer 1

Нет необходимости в re-assign и if-else условии

Можно использовать предыдущее состояние с &&.

changeMessage = () => {
  this.setState(prev => prev.message === "CLAY" && { message: "BOOM VOOM" });
}

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      message: "CLAY"
    };
  }
  handler = () => {
    this.setState(
      prev => prev.message === "CLAY" && { message: "BOOM VOOM" }
    );
  };

  render() {
    console.log(this.state.message);
    return <button onClick={this.handler}>{this.state.message}</button>;
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

Answer 2

Когда вы пишете mm = "CLAY", вы присваиваете значение "CLAY" переменной mm, так что это всегда будет правдой.

Для строгого сравнения используйте === вот так:

if (mm === "CLAY")