Я получил список пользователей, и рядом с каждым пользователем есть кнопка блокировки. После нажатия на кнопку блокировки появляется модальное сообщение с запросом подтверждения. Когда я подтверждаю, конкретный пользователь блокируется.

Теперь я получил отображение модального, но после нажатия кнопки подтверждения ничего не происходит. Я думаю, мне нужно назначить пользователя кнопке? Кнопка разблокировки работает, но она не в модальном режиме.

Мой код:

 
import MyModal from '@/views/MyModal'

function UsersList({ users, userId }) {
  function locking(pk, action) {
    axios.get(`/user/${pk}/${action}/`).then(() => {
      update()
    })
  }

  return (
          ...{users != null amp;amp; users.length > 0 ? (
            users.map((profile) => {
              return (
                <tr key={profile.id} id={profile.id} className={userId === profile.id ? 'table-active' : ''}>
                  {showEntities amp;amp; <td className='align-middle'>{profile.entity_name}</td>}
                  <td className='align-middle'>
                    {profile.first_name} {profile.last_name}
                    {!profile.active amp;amp; (
                      <span className='ml-xl-2 badge badge-pill badge-secondary'>
                        <i className='fa fa-lock' /> Blocked
                      </span>
                    )}
                  </td>...
                    {profile.id !== userId amp;amp; //to be sure to not block myself
                      (profile.active ? (
                        <button
                          type='button'
                          className='btn d-block btn-danger w-5rem mb-2 badge'
                          data-toggle='modal'
                          data-target='#MyModal'
                        >
                          Block
                        </button>
                      ) : (
                        <a
                          className='btn d-block btn-warning w-5rem mb-2 badge'
                          href='#'
                          onClick={() => {
                            locking(profile.id, 'unlock')
                          }}
                        >
                          Unblock
                        </a>
                      ))}
                  </td>
                </tr>
              )
            })
          ) : (
          
          )}
        </tbody>
      </table>
      <MyModal locking={locking()} />
    </div>
  )
}
export default UsersList

  

myModal

 export default function  MyModal({locking}) {
  return (
    <div className='modal fade' id='MyModal' tabIndex='-1' aria-labelledby='MyModal' aria-hidden='true'>
 ...
            <h5 className='modal-title' id='MyModal'>
              Are you sure to block this user?
            </h5>
            <button type='button' className='close' data-dismiss='modal' aria-label='Close'>
              <span aria-hidden='true'>amp;times;</span>
            </button>
          </div>
          <div className='modal-footer'>
            <button type='button' className='btn btn-default' data-dismiss='modal'>
              <i className='fas fa-times mr-2' />
              Exit
            </button>
            <button
              type='button'
              className='btn btn-success'
              onClick={() => {
                locking      
              }}
            >
              <i className='fas fa-check-circle mr-2' />
              Confirm
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

  

Проблемы

1. Для блокировки профиля нет обработчика кликов
2. При переходе locking к MyModal нему немедленно вызывается ( locking={locking()} )
3. При MyModal блокировке кнопки onClick обратный вызов locking не вызывается ( () => { locking }

Решение

1. Добавьте некоторое состояние UserList , чтобы сохранить идентификатор пользователя / профиля для блокировки / разблокировки
2. Создайте обратный вызов блока для перехода к модальному
3. Передать обратный вызов блока в MyModal

Список пользователей

 function UsersList({ users, userId }) {
  const [profileId, setProfileId] = useState(null); // <-- create id state

  function locking(pk, action) {
    axios.get(`/user/${pk}/${action}/`)
      .then(() => {
        update();
      })
      .finally(() => {
        setProfileId(null); // <-- clear state when done
      });
  }

  const blockId = () => locking(profileId, 'lock'); // <-- callback to block/lock

  return (
          ...
          {users != null amp;amp; users.length > 0 ? (
            users.map((profile) => {
              return (
                <tr key={profile.id} id={profile.id} className={userId === profile.id ? 'table-active' : ''}>
                  ...
                  </td>
                    ...
                    {profile.id !== userId amp;amp; //to be sure to not block myself
                      (profile.active ? (
                        <button
                          type='button'
                          className='btn d-block btn-danger w-5rem mb-2 badge'
                          data-toggle='modal'
                          data-target='#MyModal'
                          onClick={() => setProfileId(profile.id)} // <-- set id to block
                        >
                          Block
                        </button>
                      ) : (
                        <a
                          className='btn d-block btn-warning w-5rem mb-2 badge'
                          href='#'
                          onClick={() => {
                            locking(profile.id, 'unlock')
                          }}
                        >
                          Unblock
                        </a>
                      ))}
                  </td>
                </tr>
              )
            })
          ) : (
          
          )}
        </tbody>
      </table>
      <MyModal locking={blockId} /> // <-- pass blockId callback
    </div>
  )
}
  

myModal

 export default function  MyModal({locking}) {
  return (
    <div className='modal fade' id='MyModal' tabIndex='-1' aria-labelledby='MyModal' aria-hidden='true'>
      ...
            <button
              type='button'
              className='btn btn-success'
              onClick={locking} // <-- attach callback
            >
              <i className='fas fa-check-circle mr-2' />
              Confirm
            </button>
      ...
    </div>
  )
}