How to change the state of a parent component in React?

Question

JavaScript

Hello! How to implement a change in the parent component, on the onClick event in the child component. For example, I have a list of contacts where the ContactList component is responsible for rendering the list, and the Contact component is responsible for displaying the contact in the list. So here's how to implement so that when you click on a contact, an additional one opens. information about the contact, and when you click on another contact, additional information was revealed. information of this contact was hidden from the previous one? At me now at a clique the additional is displayed. information, but I can't think of a way to hide the extra. previously disclosed contact information.
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

For example, declare a function in the parent component that will do what you need, and pass it to the child through props. In the child, just call it.