Article.js

import React, { Component } from "react";

class Article extends Component {
  constructor(props) {
    super(props)

    this.state = {
      isOpen: props.defaultOpen,
      idAd: props.idAd
    }
  }

  componentWillReceiveProps(nextProps) { 
    if (nextProps.defaultOpen !== this.props.defaultOpen) {
      this.setState({
        isOpen: nextProps.defaultOpen
      })
    }

    if (nextProps.idAd !== this.props.idAd) {
      this.setState({
        idAd: nextProps.idAd
      })
    }
  }

  

  render() {
    const {article} = this.props;
    const body = this.state.isOpen && <section className = 'card-text'> {this.props.description} </section>
    return (
      <div className="card mx-auto" style = {{width: '70%'}}>
        <div className = "card-header "> 
          <h4> 
            {this.props.name} 
            <button onClick = {this.handleClick} className = 'btn btn-primary btn-lg float-right'> 
              {this.state.isOpen ? "close" : "open"} 
            </button>
            <button className = 'btn btn-primary btn-lg float-right' onClick={this.delete} > 
              Delete
            </button>  
          </h4>  
        </div>
        <div className = 'card-body'>
          {body}
          <h6 className = "card-subtitle text-muted"> phone [rus]: {this.props.phoneNumber} </h6> 
        </div>
      </div>
    )
  }

  delete = () => {
    this.props.deleteAd(this.state.idAd);
    localStorage.removeItem(this.state.idAd);
  }

  handleClick = () => {
    this.setState({
      isOpen: !this.state.isOpen
    })
  }
}


export default Article;