Как в React передать props/state элемента на другую страницу?

Question

[Сергей]

Есть карточка-ссылка на статью - у которой в h3 есть this.props.title

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;

Есть страница со списком этих карточек, куда передается массив cardsData с данными

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;

Как по клику на карточку забирать ее заголовок { this.state.cards[index].title } , переходить на страницу статьи и вставлять этот заголовок в название статьи?

Comments

[Шохрух Шаймардонов]

Мне кажется у вас логика в приложении хромает. Постарайтесь использовать централизованно хранить стэйты.
Гляньте как работает redux

[Александр Черемхин]

по существу вы задаёте два вопроса
1) как узнать какую карточку выбрали.
2) как вывести статью которую выбрали.

Это стандартные кейсы для React и может быть решено многими способами.
К сожалению код который вы приводите и формулировка вопросов находятся на таком уровне, что для ответа придётся кратко пересказать несколько разделов руководства по React.
Я не хочу вас обидеть, но думаю что вам совершенно необходимо прерваться в написании кода и почитать руководство React, хотяб основные вещи.