Передайте одну запись таблицы другому компоненту родственного компонента в ответ

У меня есть таблица, содержащая различные данные по странам (данные поступают из API). Для каждой записи в таблице есть возможность редактирования. Что делает это редактирование, так это переводит пользователя к другому компоненту, с помощью которого пользователь может редактировать соответствующие данные поля.

У меня есть API редактирования, готовый для редактирования, но я хочу показать данные перед редактированием. Конечно, я могу сделать еще один GET-запрос со страницы редактирования. Но если возможно, я хочу отправить все данные (из таблицы) в компонент редактирования. Так что нет необходимости в другом GET-запросе. Я добавил код таблицы.

Ссылка на тестовую среду Code

https://pitqx.csb.app/list

  <table className="table table-striped table-hover table-bordered">
                        <thead>
                            <tr>
                                <td><p className="paragraph">Country</p></td>
                                <td><p className="paragraph">State</p></td>
                                <td><p className="paragraph">City</p></td>
                                <td><p className="paragraph">Area</p></td>
                                <td><p className="paragraph">Postal Code</p></td>
                                <td> <p className="paragraph">Delete</p></td>
                                <td> <p className="paragraph">Action</p></td>
                            </tr>
                        </thead>
                        <tbody>

                        {
                            countries ?
                    countries.map((country,index) =>(
                        <tr key={index} data-id={country._id} >
                        
                        <td>
                            <h3 className="paragraph">{country.country}</h3>
                        </td>
                        <td>
                            <h3 className="paragraph" style={marginBottom}>{country.state}</h3>
    
                        </td>
                        <td>
                            <p className="paragraph" style={marginBottom}>{country.city}</p>
                        </td>
                        <td>
                            <p className="paragraph" style={marginBottom}>{country.area}</p>
                        </td>
    
                         <td>
                         <p className="paragraph" style={marginBottom}>{country.postal_code}</p>
                         </td>
                          <td>
                         <i className="fa fa-trash" ></i>
                         </td>
                         <td className="relative">
                             <Link to={"/dashboard/setting/country-and-city-setting/edit/"+country._id}>
                                 <button type="button" className="golden-button-sm">Edit</button>
                             </Link>
                            
                            
                        </td>
                         </tr>

                    )) : null
                }

                        </tbody>
                    </table>

reactjs typescript react-state-management react-table
person Pranay kumar    schedule 28.05.2020    source источник
comment
Можете ли вы поделиться с нами codeandbox с полным кодом?   -  person SorcererApprentice    schedule 28.05.2020
comment
@SorcererApprentice я добавил пример кода.   -  person Pranay kumar    schedule 28.05.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вот что я нахожу решение. Мы можем передавать данные состояния с самим атрибутом Link.


<td className="relative">
 <Link 
      to={{
         pathname:"/dashboard/setting/country-and-city-setting/edit/",
         state:country
         }}
  >
  <button type="button" className="golden-button-sm">Edit</button>
  </Link>

  </td>
person Pranay kumar    schedule 29.05.2020
comment
этот вопрос поможет мне stackoverflow.com/questions/48291678/ - person Pranay kumar; 29.05.2020