Как передать значение параметра другому компоненту

#reactjs #react-props

Вопрос:

Когда пользователь нажимает на карточку, я бы хотел, чтобы значение реквизита «заголовок» отображалось в H2 страницы Стиля работы. Я уже работал с проходящими реквизитами раньше, однако я немного сбит с толку, так как реквизитам уже присвоены значения.

Компонент с картами на выбор:

 export default function TypeOfWorkPage() {

  return (
    <>
      <div className="user-header">
        <div className="user-header-wrap">
          <h1 className="greeting">Good evening</h1>
          <ProfileButton />
        </div>
      </div>

      <main>
        <div className="main-wrap">
          <section className="card-container">
            <h1>Choose your work style</h1>

            <div className="card-wrap">
              <Link to="/WorkPage">
                <Card
                  title="Short Task"
                  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue quam a semper accumsan."
                  background="#3ee18e"
                />
              </Link>
              <Link to="/WorkPage">
                <Card
                  title="Deep Work"
                  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam congue quam a semper accumsan."
                  background="#ee749d"
                />
              </Link>
              <Link to="/WorkPage">
                <Card
                  title="Pomodoro"
                  description="The technique uses a timer to break down work into intervals, traditionally 25 minutes in length,"
                  background="#e42537"
                />
              </Link>
            </div>
          </section>
        </div>
      </main>
    </>
  );
}
 

Компонент Стиля Работы

 export default function WorkPage() {
    return(
        <>
        <h2>Work Style</h2>
        </>
    )
}