How to dynamically show loader on react button

Question

below is my code

 <button
          className="btn"
          id={index}
          onClick={() =>
            `Make an API call`
            )
          }
        >
          {loader && index =={"Dont know how to add button ID here to show loader"}? (
            <i class="fas fa-spinner fa-spin login-spin"></i>
          ) : (
            "Add To Cart"
          )}
        </button>

I have a bunch of buttons and i am planning to show loader if the user click on particular button,at the same time i am posting a request to backend, i have given index as id to each button but i am unable to access the button ID to show the loader symbol, i do not know how to acces BTN id without click PS:i am inside a function not a react component

user700284 · Accepted Answer · 2021-04-26 06:17:39Z

3

You can make use of the below approach to achieve this

Define a state to set the selected button id, something like selectedButtonId
On clicking the button, it should be set to the selected button id and then after your API call is success, it should be reset to the default value.
Then compare the index(id) of button with the state defined in step(1) to show the loader as applicable.

Here is a sample code which utilizes the above points - But just changes the button label instead of a loading icon

export default function App() {
  const [selectedBtnId, setSelectedBtnId] = useState(-1);
  const buttons = [{ id: 1 }, { id: 2 }, { id: 3 }];
  const handleClick = id => setSelectedBtnId(id);
  return (
    <div>
      {buttons.map(({ id }) => (
        <button id={id} key={id} onClick={() => handleClick(id)}>
         {selectedBtnId === id ? 'Loading': 'Click Me'}
        </button>
      ))}
    </div>
  );
}

answered Apr 26, 2021 at 6:17

user700284

13.7k8 gold badges42 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Akshay98 Over a year ago

Hey thanks man, appreciate that, I got the idea how to do that...

Drew Reese · Accepted Answer · 2021-04-26 06:42:24Z

Access the button id from the onClick event object.

Example:

const clickHandler = e => {
  const { id } = e.target;
  // id is button id
};

<button id={0} onClick={clickHandler}>Click Me</button>

Combine this with some loading state that correlates a currently loading button id. Use the current loading state button id to match the id for any specific button.

const [loadingId, setLoadingId] = useState({});

...

setLoadingId((ids) => ({
  ...ids,
  [id]: true
}));

...

<button type="button" id={0} onClick={clickHandler}>
  {loadingId[0] ? <Spinner /> : "Button Text Here"}
</button>

Full example:

const mockFetch = () =>
  new Promise((resolve) => {
    setTimeout(() => resolve(), 3000);
  });

function App() {
  const [loadingId, setLoadingId] = useState(null);

  const clickHandler = async (e) => {
    const { id } = e.target;
    setLoadingId(ids => ({
      ...ids,
      [id]: true
    }));
    try {
      await mockFetch();
    } catch {
      // ignore
    } finally {
      setLoadingId(ids => ({
        ...ids,
        [id]: false
      }));
    }
  };

  return (
    <div className="App">
      <button type="button" id={0} onClick={clickHandler}>
        {loadingId[0] ? "loading..." : 0}
      </button>
      <button type="button" id={1} onClick={clickHandler}>
        {loadingId[1] ? "loading..." : 1}
      </button>
      <button type="button" id={2} onClick={clickHandler}>
        {loadingId[2] ? "loading..." : 2}
      </button>
      <button type="button" id={3} onClick={clickHandler}>
        {loadingId[3] ? "loading..." : 3}
      </button>
      <button type="button" id={4} onClick={clickHandler}>
        {loadingId[4] ? "loading..." : 4}
      </button>
    </div>
  );
}

Demo

dulebov.artem · Accepted Answer · 2021-04-26 08:08:40Z

I would better go with a separate component for a button that receives an index and does whatever it wants

function LoadingButton({id}) {
   const [isLoading,setIsLoading] = useState(false);
   if (isLoading) return (<i class="fas fa-spinner fa-spin login-spin"></i>)
   return ( 
        <button
          className="btn"
          id={id}
          onClick={() =>
             setIsLoading(true)
             MakeApiRequest().then(result=>setIsLoading(false))
            )
          }
        >
          "Add to Cart"
        </button>
    )

}

This is a better option because it allows you to have multiple standalone loading buttons, you can click some of them and each will show a spinner.

Then you can use it like

<LoadingButton id={index}/>

XGG · Accepted Answer · 2021-04-26 06:09:39Z

-1

I guess you can just add it directly and judge that it meets the conditions for displaying the loading icon.

answered Apr 26, 2021 at 6:09

XGG

494 bronze badges

2 Comments

Akshay98 Over a year ago

i cannot add directly, because i have 20 odd buttons

XGG Over a year ago

Oh oh, what is your judgment condition

Collectives™ on Stack Overflow

How to dynamically show loader on react button

4 Answers 4

1 Comment

Demo

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Demo

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related