How to create a view profile link for all profile from table

Question

I have a table image that has multiple user. I want to create a link for each profile that shows the user details when the user click on view button in the table the.

My table code is:

<div className='container-fluid'>
      <Modal colNames={colNames} details={editData} editOnChange={editOnChange} editFormSumbit={editFormSumbit}/>
      <div className='d-flex justify-content-center'>
        {list.length > 0 && (
          <table className='table table-striped table-hover w-100 text-center'>
            <thead style={{ backgroundColor: '#56ebb2' }}>
              <tr>
                {colNames.map((colName, index) => (
                  <th key={index}>{colName.toUpperCase()}</th>
                ))}
                <th key='999'>View Profile</th>
                <th key='1000'>Insert / Delete</th>
              </tr>
            </thead>
            <tbody>
              {Object.values(list).map((student, index) => (
                <tr key={index} style={{ borderBottom: '1px solid gray' }}>
                  {Object.values(student).map((val, index2) => (
                    <td key={index2}>{val}</td>
                  ))}
                  <td key='999'>
                    <button className='border-0 bg-transparent' onClick={() =>{console.log(student);}}>
                      View
                    </button>
                  </td>
                  <td key='1000'>
                    <button className='border-0 bg-transparent' data-bs-toggle='modal' data-bs-target='#staticBackdrop' onClick={(e) => { handleEdit(e, student);}} >
                      <i className='bi bi-pencil-square'></i>
                    </button>|
                    <button className='border-0 bg-transparent' onClick={(e) => handleDelete(e, student)} >
                      <i className='bi bi-trash-fill'></i>
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>

Please help me out, thanks!

Answer 1

You need to create a new colum called view details or view profile, and in table body row you need to add a button or a tag or a link to new page where you need to redirect it. as you already used button then called a Link component from react-router-dom and pass a to prop to it where you need to redirect it. Create a route as in my code there is a /student/:id route which take value of student as prop as viewDetails which you need to send.

<Route exact path='/student/:id' element={
     <Profile userDetails={student}/> 
    } />;

below is the code you need to change it to your student table

    <div className='container-fluid'>
      <Modal colNames={colNames} editDetails={editData} editOnChange={editOnChange} editFormSumbit={editFormSumbit} modalType={modalType} addDetails={addData} addOnChange={addOnChange} addFormSumbit={addFormSumbit} />
      <div className='d-flex justify-content-center'>
        {list.length > 0 && (
          <table className='table table-striped table-hover w-100 text-center'>
            <thead style={{ backgroundColor: '#56ebb2' }}>
              <tr>
                {colNames.map((colName, index) => (
                  <th key={index}>{colName.toUpperCase()}</th>
                ))}
                <th key='999'>View Profile</th>
                <th key='1000'>Insert / Delete</th>
              </tr>
            </thead>
            <tbody>
              {Object.values(list).map((student, index) => (
                <tr key={index} style={{ borderBottom: '1px solid gray' }}>
                  {Object.values(student).map((val, index2) => (
                    <td key={index2}>{val}</td>
                  ))}
                  <td key='999'>
                    <Link to={`/student/${student.id}`}>
                      <button className='border-0 bg-transparent' onClick={() => {userDetails(student); }} > View </button>
                    </Link>
                  </td>
                  <td key='1000'>
                    <button className='border-0 bg-transparent' data-bs-toggle='modal' data-bs-target='#staticBackdrop' onClick={(e) => { handleEdit(e, student); }} >
                      <i className='bi bi-pencil-square'></i>
                    </button>{' '} | {' '}
                    <button className='border-0 bg-transparent' onClick={(e) => handleDelete(e, student)} >
                      <i className='bi bi-trash-fill'></i>
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>

else you can take it from the params and show details of student with the same id.