Type 'number | { percent: number; }' is not assignable to type 'string | number

Currently, I'm working on a React, Typescript project implementing a progress bar using react semantic-ui. So I came up with a typescript error. Here is my code

import React, { Component,useState } from 'react'
import { Button, Progress } from 'semantic-ui-react'

export default function ProgressMobileStepper()  {
  //let percent :number
  const [activeStep={percent:0}, setActiveStep] = React.useState(0);
 
  const increment = () => {
    setActiveStep((prevActiveStep) => prevActiveStep   5);
  };

  const decrement = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 5);
  };
 

  return (
    <>
     <div>  
      <Progress percent={activeStep} indicating color={'red'} size={'small'}/> //error in here percent
      <Button onClick={increment}>Increment</Button>
      <Button onClick={decrement}>Decrement</Button>
     </div>
    </>
  );        
}

CodePudding user response：

Try changing it from

const [activeStep={percent:0}, setActiveStep]

const [activeStep, setActiveStep]

CodePudding user response：

If you are trying to set initial state then then do it in the useState hook, using desturcturing assignment fallback values is useless as the useState hook will always return the defined state you set.

Either move the percent substate into the hook and update accordingly:

//let percent :number
const [activeStep, setActiveStep] = React.useState({ percent: 0 });
 

const increment = () => {
  setActiveStep((prevActiveStep) => ({
    percent: prevActiveStep.percent   5
  }));
};

const decrement = () => {
  setActiveStep((prevActiveStep) => ({
    percent: prevActiveStep.percent - 5
  }));
};

...

<Progress
  percent={activeStep.percent}
  indicating
  color={'red'}
  size={'small'}
/>

Or don't use a nested percent state:

//let percent :number
const [activeStep, setActiveStep] = React.useState(0);
 

const increment = () => {
  setActiveStep((prevActiveStep) => prevActiveStep   5);
};

const decrement = () => {
  setActiveStep((prevActiveStep) => prevActiveStep - 5);
};

<Progress
  percent={activeStep}
  indicating
  color={'red'}
  size={'small'}
/>

CodePudding user response：

The Problem

Your state definition is not correct and causes the error.

const [activeStep={percent:0}, setActiveStep] = React.useState(0);

You didn't need an object for your state as you are trying to decrease and increase the activeStep in the handler functions.

so if you want to define an object as a state, you can easily pass a {} as the parameter of useState, but in your case, you just need a number for the increase and decrease.

The Solution

Change the state definition to properly create a state variable:

const [activeSte, setActiveStep] = React.useState(0)

As a suggest

You don't need to wrap your component with fragment <></> since your return statement is all wrapped in a div element.