Question - Block only one child in a list

[diegodesouza]

I have the following scenario where we display a list in Cards within the Card we have icons that will trigger an action and API call. When the promise is yet to resolve, we would like to give the user some feedback. I was trying to be clever and use the BlockUI to only block that specific card that the user was interacting with. Can this package do what i'm asking?

[nylon22]

@diegodesouza the BlockUi component only blocks its children. from the screenshot you provided, it looks like you already have it working. can you clarify what the issue is?

[diegodesouza]

The screenshot is only a mockup, not exactly the implementation. When i tried using BlockUI within a card, it still blocked the whole page.

[nylon22]

can you share a code sandbox or stackblitz demonstrating the issue?

[TheSharpieOne]

This should be more than enough of an example without going into styling. It shows a legit list (ul) where a single item (li) is able to be blocked. https://stackblitz.com/edit/react-24vix1

import React from "react";
import { Button } from "reactstrap";
import BlockUi from "react-block-ui";
import "react-block-ui/style.css";

export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.toggleBlocking = this.toggleBlocking.bind(this);
    this.state = {
      blocking: false
    };
  }

  toggleBlocking() {
    this.setState({ blocking: !this.state.blocking });
  }

  render() {
    return (
      <div>
        <ul>
          <li>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </li>
          <BlockUi tag="li" blocking={this.state.blocking}>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </BlockUi>
          <li>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </li>
        </ul>
        <Button onClick={this.toggleBlocking} color="primary">
          Toggle Block
        </Button>
      </div>
    );
  }
}

Note: We should probably also prevent user selection of blocked content and the loader...