Как получить пропсы из другого class componenta?

Question

[Иван Симонов]

Добрый день

Есть код

Компонент 1

import React from 'react';

class Block1 extends React.Component {
    constructor(props: any){
        super(props);
    }

    render() {
        return (
            <div className="block">
                <h2 className="block__title">{this.props.title}</h2>
                <span className="block__value">{this.props.value}</span>
            </div>
        )
    }
}

export default Block1;

Компонент 2

import React from 'react';
import data from './data' // json file

class Block2 extends React.Component {
    this.state = {
        data: data,
        showModal: false
    };
    
    openModal = () => {
        this.setState({ showModal: true })
    }

    closeModal = () => {
        this.setState({ showModal: false })
    }

    render() {
        return (
           {this.state.data.map((data: any, index: any) => {
              <a href="#" onClick={this.openModal}>
                <span>Link {data.title}</span><span>{data.value}</span>
              </a>              
            })}
            
            <div className="modal" show={this.state.showModal} handleClose={this.closeModal}>
                  <Block1 title={this.data.title} value={this.data.value} />
             </div>
        )
    }
}

export default Block2;

Компонет Block2 выводит список блоков из json file, в свою очередь этот блок это ссылка, при клике на которую пытаюсь получить данные в сплывающем окне.
Как в данном случае правильно использовать пропсы, чтобы прописав их в 1 компоненте, получить во втором?