Блог

У меня есть кнопка React (Hook) с функцией onClick, вот мой компонент React Hook:

 function FormatButton(props) {

  const [loading, setLoading] = useState(false);

  function handleClick(){
    const formatter = new Formatter(props.filterResult);
  }
  
   return (
     <Styles>
       {(props.filterResult.length > 0 ? 
          <button onClick={handleClick}>Convert</button>
           : '')}
       <RingLoader
          size={150}
          color={"#35D4C7"}
          loading={loading}
        />
     </Styles>
   )
 }

export default FormatButton;
  

вот мой класс форматирования (не компонент react):

 class Formatter{
    constructor(data=[]){
        this.data = _.map(data, currData => {
                return _.mapValues(currData,value=>{ return this.format(value)})
            })
    }
}
  

Я использую, react-spainners который мне нужно только передать значение состояния логического типа loading для счетчика, я хотел бы установить loading как ture при const formatter = new Formatter(props.filterResult); запуске, а затем установить loading как false при завершении инициализации класса форматирования.
Я думаю, может быть, я могу использовать async / await, но на самом деле не знаю, как использовать это при инициализации класса, есть ли какие-либо другие способы добиться этого? Большое спасибо за помощь!!