Pass single table entry to another sibling component in react

Question

I have a table that includes various country data (data is coming from API). There is an edit option with each table entry. What this edit does is take the user to another component by which the user can edit respective field data.

I have edit API ready for editing purposes, but I want to show data before editing. Of course, I can make another GET request from the edit page. But if possible I want to send each data (from table) to the edit component. So that there is no need for another GET request. I added the table code.

CodeSandbox Link

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>

Answer 1

Here is what I find a solution. We can pass state data with the Link attribute itself.

<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>