How do I pass an element's props/state to another page in React?

Question

JavaScript

There is a link card to the article - which has this.props.title in h3

import React from 'react';

class ArticleCard extends React.Component {
    constructor() {
    super();
    }

    render () {
        const newClass = this.props.newClass ? this.props.newClass : '';
        let descrText = this.props.descr;

        return (
            <a href={ this.props.href } className={ 'article-card ' + newClass }>
                <div className="article-card__text-block">
                    <h3 className="article-card__title">{ this.props.title }</h3>
                </div>
                <p className="article-card__descr">{ descrText }</p>
                <span className="article-card__date">{ this.props.date }</span>
            </a>
        )
    }
};

export default ArticleCard;

There is a page with a list of these cards, where the cardsData array with data is passed

import React from 'react';
import ArticleCard from '../ArticleCard/ArticleCard';
import {cardsData} from '../cardsData'

class MainBlockBlog extends React.Component {
    constructor() {
    super();

        this.state = {cards: cardsData};
    }

    
    render() {
        const articleList = this.state.cards.map((card, index) => {
            return <ArticleCard 
                href={ this.state.cards[index].href } 
                key={'article-card' + index} 
                newClass="main-block-blog__article"
                title={ this.state.cards[index].title } 
                descr={ this.state.cards[index].descr }
                date={ this.state.cards[index].date }
                prop = {this.props.qwerty}
                />
        });

        return (
            <main className='main-block main-block-blog'>
                <div className="page-container main-block__wrap">
                    <div className="main-block-blog__title-block">
                        <h1 className="main-block__title main-block-blog__title">Блог</h1>
                        <Tabs />
                    </div>
                    <div className="main-block-blog__list">
                        { articleList }
                    </div>
                </div>
            </main>
        )
    }
};

export default MainBlockBlog;

How to click on a card to take its title { this.state.cards[index].title } , go to the article page and insert this title into the title of the article?