How to get props from another class component?

Question

React

Good afternoon

There is a code

Component 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;

Component 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;

Компонет Block2displays a list of blocks from json file, in turn, this block is a link, when clicked, I try to get data in a pop-up window.
In this case, how to correctly use props so that, having written them in 1 component, you can get them in the second one?