Как в React изменить состояние родительского компонента?

Question

[Curiosity]

Здравствуйте! Как реализовать изменение родительского компонента, при событии onClick в дочернем компоненте. Например у меня есть список контактов где за рендер списка отвечает компонент ContactList, а за отображение контакта в списке компонент Contact. Так вот, как реализовать чтобы при клике на контакт раскрывалось доп. информация о контакте, а при клике на другой контакт раскрывалось доп. информация этого контакта и скрывалось у прежней? У меня сейчас при клике отображается доп. информация, но я не могу придумать так чтобы оно скрывало доп. информацию ранее раскрытого контакта.

ContactList:

import React, { Component } from 'react';

import Contact from './Contact';

class ContactsList extends Component {

  constructor(props) {
    super(props);
    this.state = {
      displayedContacts: this.props.items,
    };
  }

  handleSearch = (event) => {
    var searchQuery = event.target.value.toLowerCase();
    var displayedContacts = this.props.items.filter((el) => {
      var searchValue = el.name.toLowerCase();
      return searchValue.indexOf(searchQuery) !== -1;
    });
    this.setState({
      displayedContacts: displayedContacts
    });
  }
  
  render() {
    return (
      <div className="contacts">
        <input type="text" className="search-field" onChange={this.handleSearch}/>
        <ul className="contact-list">
          {
            this.state.displayedContacts.map((el) => {
              return <Contact 
                key={el.id}
                name={el.name}
                phoneNumber={el.phoneNumber}
                image={el.img}
                email={el.email}
                adress={el.adress}
              />;
            })
          }
        </ul>
      </div>
    );
  }
}

export default ContactsList;

Contact:

import React, { Component } from 'react';


class Contact extends Component {

    constructor(props) {
    super(props);
    this.state = {
      isOpened: false
    };
  }

  toggleState() {
    this.setState({isOpened: !this.state.isOpened});
  }
  
  render() {
    let dropdownInfo;
    if (this.state.isOpened) {
      dropdownInfo = <div className="dropdown-info">
        <div className="contact-email">{this.props.email}</div>
        <div className="contact-adress">{this.props.adress}</div>
      </div>
    }
    return (
        <li className="contact" onClick={this.toggleState.bind(this)}>
          <img className="contact-image" src={this.props.image} width="60px" height="60px"/>
          <div className="contact-info">
            <div className="contact-name">{this.props.name}</div>
            <div className="contact-number">{this.props.phoneNumber}</div>
            {dropdownInfo}
          </div>
        </li>
    );
  }
}

export default Contact;

Answer 1

[Vit]

Например объявлять в родительском компоненте функцию, которая будет делать вам что надо, и прокидывать ее в дочерний через props. В дочернем просто вызывать ее.