type for useState with callback - Type has no call signatures-CodePudding

I am using useState with a callback:

interface Props {
  label: string;
  key: string;
}

const [state, setState] = useState<Props[]>([]);


setState((prev : Props[]) => [...prev, newThing])

I get the error:

2349: This expression is not callable. Type 'Props' has no call signatures.

I'm not sure how to define a call signature inside the Props interface/type, what is the best approach to resolve this?

Edit:

This is how I am using it inside my code:

Interface:

interface TagProps {
  left: string;
  top: string;
  backgroundColor: string;
  rotation: number;
  label: string;
  key: string;
}

Home.tsx

const Home: FC<TagProps> = (setState, state: TagProps[]) => {
  const createTag = (e: any) => {
    const tagSpec = {
      left: e.clientX   "px",
      top: e.clientY   "px",
      backgroundColor: randomColour(colors),
      rotation: randomNumber(-20, 20),
      label: tech[randomNumber(0, tech.length - 1)],
      key() {
        return this.label   this.backgroundColor;
      },
      position: "absolute",
    };
    setState((prev: TagProps[]) => [...prev, tagSpec]);
  };

...

}

App.tsx

function App() {
  const [tag, setTag] = useState<TagProps[]>([]);

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home setState={setTag} state={tag} />} />
          <Route path="/blog" element={<Blog />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

CodePudding user response：

You have to desctucture your props

// from
const Home: FC<TagProps> = (setState, state: TagProps[]) => {

// to
const Home: FC<TagProps> = ({ setState, state }) => {

Also I wouldn't pass setState down to the component

CodePudding user response：

React Functional Component's property are under the first param, you can do this to get them

const Home = (props) => {
  const { state, setState } = props;

  // setState(...)
}