React TypeScript button with loading spinner

Question

I have a button inside a react component, the test on the button says Join Now when the button is clicked I call the function submitForm which then sets the state to true. I want the loading svg image to be displayed but instead the path to the image is shown on the button.

import React, { useState } from 'react';
import Context from './context';
import loading from '../images/loading.svg';

const ButtonSpinner: React.FC = () => {

  const [state, setState] = useState({loading: false});
  function submitForm() {
    setState({ ...state, loading: true})
  }

  return (
     <button className="btn-join" onClick={submitForm}>
       {!state.loading && 'Join Now!'} 
       {state.loading && loading}
     </button>       
  );
}

export {ButtonSpinner};

You need to use the img tag to show the image.

Alok Mali
– Alok Mali

2019-09-03 05:39:39 +00:00
Commented Sep 3, 2019 at 5:39 — Alok Mali
– Alok Mali, Commented Sep 3, 2019 at 5:39

Adam Kosmala · Accepted Answer · 2019-09-03 05:40:26Z

4

try displaying image like this instead- you need an img tag in order to display image content, React won't do that out of the box.

return (
  <button className="btn-join" onClick={submitForm}>
    {!state.loading && 'Join Now!'} 
    {state.loading && <img src={loading} /> }
  </button>       
);

answered Sep 3, 2019 at 5:40

Adam Kosmala

9356 silver badges9 bronze badges

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

Comments

Vikas Singh · Accepted Answer · 2019-09-03 06:15:23Z

0

import React, { useState } from 'react';
import Context from './context';
import loading from '../images/loading.svg';

const ButtonSpinner: React.FC = () => {

const [state, setState] = useState({loading: false});
function submitForm() {
    setState({ ...state, loading: true})
}

return (
 <button className="btn-join" onClick={submitForm}>
   {!state.loading ? 'Join Now!' : <img src={loading} alt="loading" />} 
 </button>       
);
}

export {ButtonSpinner};

edited Sep 3, 2019 at 6:15

answered Sep 3, 2019 at 5:44

Vikas Singh

1,8651 gold badge18 silver badges27 bronze badges

1 Comment

Bill Over a year ago

needs the closing image tag />

Collectives™ on Stack Overflow

React TypeScript button with loading spinner

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related