当道具改变时，图标不会改变

Question

我想根据他的道具将图标从播放更改为暂停。 在控制台上，道具正确更改但图标没有 这是我的代码

class Video extends React.PureComponent{
   constructor(props) {
    super(props);
    this.state = { video: "initial", icon: true };
    this.handlePlay = this.handlePlay.bind(this);
   }
   handlePlay() {
     this.setState({ icon:!this.state.icon });
     let state = this.state.video.paused;
     state
      ?this.state.video.play()
      :this.state.video.pause()

     }
    render(){
      return (
       <Play playPause={this.handlePlay} icon={this.state.icon} />
     )
   }



class Play extends React.PureComponent {
  render() {
    console.log(this.props.icon) // -> console true/false
    return (
      <div onClick={this.props.playPause}>
       {this.props.icon ?<i className="fa fa-play" /> :<i className="fa fa-pause" />}
      </div>
    );
  }
}