使用加载微调器来响应TypeScript按钮

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};

Answer 1

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>       
);

Answer 2

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};