Lanka Developers Community

    Lanka Developers

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Shop

    How to update individually buttons icons got from a same component in React

    Front-End Development
    javascript reactjs button icons state
    1
    1
    300
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • N
      nipooNM last edited by

      I have a View All page. The page has a table with user data with actions that can be performed. The button has two different icons. Spinner icon and a default icon. I want to change the icon of the button until the task executes.

      Ex: Showing spinner icon until M_1's disabling/deleting process works and showing back the lock/trash icon.

      I know how to update one button icon by putting useState. When 1 row has 2 buttons that mean 2 useStates. So 2 rows mean 4 useStates. But that's not practical noh. I want to know how to do it the correct way.

      Table with buttons:
      table with buttons

      View All Page:

      import React, { useEffect, useState } from 'react'
      import {
        CButton,
        CCard,
        CCardBody,
        CCardHeader,
        CCol,
        CRow,
        CSpinner,
        CTable,
        CTableBody,
        CTableDataCell,
        CTableHead,
        CTableHeaderCell,
        CTableRow,
      } from '@coreui/react'
      import CIcon from '@coreui/icons-react'
      import { cilTrash, cilLockLocked } from '@coreui/icons'
      
      const ViewAll = () => {
        const [usersData, setUsersData] = useState({})
      
        const [disabled, setDisabled] = useState(false)
      
        const handleLoadMembers = async () => {
          try {
            const _data = await fetch('http://localhost:4000/api/v1/member/list', {
              method: 'GET',
              headers: {
                'Content-Type': 'application/json',
                Authorization: 'Bearer ' + localStorage.getItem('token'),
              },
            })
      
            if (_data.status !== 200) {
              throw new Error()
            }
      
            const data = await _data.json()
            setUsersData(data.members)
          } catch (err) {
            console.error(err)
          }
        }
      
        const handleDelete = async (id) => {
          alert('clicked')
          try {
            const _data = await fetch('http://localhost:4000/api/v1/member/remove/' + id, {
              method: 'GET',
              headers: {
                'Content-Type': 'application/json',
                Authorization: 'Bearer ' + localStorage.getItem('token'),
              },
            })
            window.location.reload()
      
            console.log(_data)
          } catch (err) {
            console.error(err)
          }
        }
      
        useEffect(() => {
          handleLoadMembers()
        }, [])
      
        return (
          <CRow>
            <CCol xs={12}>
              <CCard className="mb-4">
                <CCardHeader>
                  <strong>All Members</strong>
                </CCardHeader>
      
                {usersData.length > 0 ? (
                  <CCardBody>
                    <p className="text-medium-emphasis small">Here the all members of your community.</p>
                    <CTable hover bordered>
                      <CTableHead color="dark">
                        <CTableRow>
                          <CTableHeaderCell scope="col">Member ID</CTableHeaderCell>
                          <CTableHeaderCell scope="col">Name</CTableHeaderCell>
                          <CTableHeaderCell scope="col">Email</CTableHeaderCell>
                          <CTableHeaderCell scope="col">Actions</CTableHeaderCell>
                        </CTableRow>
                      </CTableHead>
                      <CTableBody>
                        {usersData.map((item, index) => {
                          return (
                            <CTableRow key={index}>
                              <CTableHeaderCell scope="row">M_{item.index}</CTableHeaderCell>
                              <CTableDataCell>{item.name}</CTableDataCell>
                              <CTableDataCell>{item.email}</CTableDataCell>
                              <CTableDataCell class="d-flex justify-content-evenly">
                                <CButton
                                  color="danger"
                                  size="sm"
                                  disabled={disabled}
                                  onClick={() => handleDelete(item._id)}
                                >
                                  {disabled ? (
                                    <CSpinner
                                      component="span"
                                      className="me-2"
                                      size="sm"
                                      aria-hidden="true"
                                    />
                                  ) : (
                                    <CIcon icon={cilTrash} className="me-2" />
                                  )}
                                  Delete
                                </CButton>
                                <CButton
                                  color="warning"
                                  size="sm"
                                  disabled={disabled}
                                  onClick={() => handleDelete(item._id)}
                                >
                                  {disabled ? (
                                    <CSpinner
                                      component="span"
                                      className="me-2"
                                      size="sm"
                                      aria-hidden="true"
                                    />
                                  ) : (
                                    <CIcon icon={cilLockLocked} className="me-2" />
                                  )}
                                  Disable
                                </CButton>
                              </CTableDataCell>
                            </CTableRow>
                          )
                        })}
                      </CTableBody>
                    </CTable>
                  </CCardBody>
                ) : (
                  'No data'
                )}
              </CCard>
            </CCol>
          </CRow>
        )
      }
      
      export default ViewAll
      
      1 Reply Last reply Reply Quote 0
      • 1 / 1
      • First post
        Last post

      1
      Online

      3.6k
      Users

      1.3k
      Topics

      5.3k
      Posts

      • Privacy
      • Terms & Conditions
      • Donate

      © Copyrights and All right reserved Lanka Developers Community

      Powered by Axis Technologies (PVT) Ltd

      Made with in Sri Lanka

      | |