Не могу понять как убрать элемент (Или вернуться к InItialState "Если такое возможно")?

Question

[Артем Андреев]

Первым кликом он добавляет, но вторым кликом незнаю как нужно сделать, чтобы он убрал данные

var Contact = React.createClass({
    getInitialState: function() {
      return {
      isOpened: {
        address: '' ,
        email: ''
      }
      }
    },
    isOpened: function(event) {

        this.setState({
            isOpened: {
              address: this.props.address ,
              email: this.props.email}
              }
            );
      },
    render:function() {
      return (
        <li className="contact" onClick={this.isOpened}>
          <img className="contact-image" src={this.props.image} width="68px" height="68px"/>
          <div className="contact-info">
            <div className="contact-name" >{this.props.name}</div>
            <div className="contact-number" >{this.props.phoneNumber}</div>
            <div>{this.state.isOpened.address}</div>
            <div>{this.state.isOpened.email}</div>
          </div>
        </li>
      )

    }
  });

Answer 1

[Никита Гущин]

Почему не используете классы?

const emptyContacts = {
  address: '' ,
  email: '',
}

var Contact = React.createClass({
    getInitialState: function() {
      return {
       contactData: emptyContacts,
      }
    },
    toggleContactsData: function(event) {
        this.setState({
            contactData: thsi.state.contactsData === emptyContacts
              ? { address: this.props.address, email: this.props.email, }
              : emptyContacts
        });
    },

    render:function() {
      return (
        <li className="contact" onClick={this.toggleContactsData}>
          <img className="contact-image" src={this.props.image} width="68px" height="68px"/>
          <div className="contact-info">
            <div className="contact-name" >{this.props.name}</div>
            <div className="contact-number" >{this.props.phoneNumber}</div>
            <div>{this.state.contactData.address}</div>
            <div>{this.state.contactData.email}</div>
          </div>
        </li>
      )

    }
  });

Comments

[Артем Андреев]

Я только учусь, но вы про создание этого??

const emptyContacts = {
address: '' ,
email: ''
}

[Артем Андреев]

Ааа вы про

class Welcome extends React.Component {
render() {
return Hello, {this.props.name};
}
}

[Никита Гущин]

Pibodi: да, про них) все равно транспилер (babel) используете, а с классами удобнее и даже быстрее)