Как передать данные между двумя компонентами React (не родителем и потомком)?

Question

[JeyFom]

Делаю todo. У меня есть компонент для добавленной таски, в котором находятся текстовое поле и кнопка "редактировать", при нажатии на кнопку происходит переход на новую страницу и открывается инпут, в котором я ввожу новый текст для редактируемой таски.
Подключен редакс, в нем стейт - это массив таск. Для каждой таски индексы не задаю самостоятельно, беру индексы объектов массива (структура: title, done):

{this.props.tasks.map((task, index) => (
          <TaskItems 
            isDone={task.done}
            doneHandler={() => this.props.doneHandler(index)}
            deleteHandler={() => this.props.deleteHandler(index)}
            inputChange={this.inputChange}
            key={index}
            task={task}
          </TaskItems>)
        )}

Вопрос вот в чем - как мне получить индекс итерируемой таски для изменения ее текста? Ведь компонент с таской и компонент для страницы с редактированием связаны только переходом (подключен роутер)
<Link to='/edit'>Edit</Link>

Индекс нужен, чтобы передать его экшену редакса.

Answer 1

[paoluccio]

Можно попробовать динамически вставлять index в путь для Link:
<Link to={`/edit/${index}`}>Edit</Link>

Роут тоже слегка изменить:

<Route path='/edit/:index'>
  <EditPage />
</Route>

Затем, на странице редактирования todo, index можно получить через хук useParams:

import { useParams } from 'react-router-dom';

const EditPage = () => {
  const { index } = useParams();

  // ...
};

Comments

[JeyFom]

Я читала об этом, но не совсем поняла, как правильно применить, а Вы прям дали готовое решение - спасибо!

Answer 2

[McBernar]

Ну так передавайте /edit/:id
Хотя я и не понимаю - зачем вам отдельная страница для редактирования в век SPA.

Comments

[JeyFom]

Да это и есть spa, в ТЗ мне поставили вот такое задание.
А можно поконкретнее? У меня была попытка так сделать, но вместо инпута отображалась пустая страница. Полагаю, что нужно что-то прописать в компоненте с инпутом, чтобы получить нужный id?
Я только постигаю этот дзен, поэтому извиняюсь, если глупость спрашиваю

[McBernar]

Да, посмотрите какой-нибудь ролик на ютубе по реакт-роутеру. За 10 минут узнаете базовые возможности — передача параметров, switch, props.history, вот это все.

Если коротко — принимаете параметр в строке url и берете его в качестве пропса доя компонента. Но, повторюсь, я бы так не делал. Это что-то из области монолитных mvc-приложений. Реакт так тоже может, но его фишка в другом.