[Solved]-TypeScript errors in React Class Component property does not exist on type 'Readonly<{}>', not sure how to set types for state-Reactjs

if you want to try it with the hooks then you can do this.

import React, { useState } from "react";

interface AppState {
  input: string;
  imageUrl: string;
}

const App: React.FC<AppState> = () => {
  const [input, setInput] = useState("");
  const [imageUrl, setImageUrl] = useState("");

  const handleOnButtonSubmit = () => {
    setImageUrl(input);
    clarifaiApp.models
      .predict(
        Clarifai.COLOR_MODEL,
        // URL
        "https://samples.clarifai.com/metro-north.jpg"
      )
      .then(
        function(response: any) {
          console.log("This is your response: ", response);
        },
        function(err: Error) {
          console.log("There was an error: ", err);
        }
      );
  };

  return (
    <Container>
      <ImageLinkForm
        onInputChange={(e: any) => setInput(e.target.value)}
        onButtonSubmit={handleOnButtonSubmit}
      />
      <FaceRecognition imageUrl={imageUrl} />
    </Container>
  );
};

export default App;

If you want to initialize the state inside the constructor of a class component you have to provide two type argument to the React.Component generic. The first argument is meant to provide type information about the props and the second argument is meant to provide the type information about the state. For example,

interface AppProps {
  // props 
}

type AppState = {
  input: string;
  imageUrl: string;
}

class App extends Component<AppProps,AppState> {
  // you don't need any more explicit type annotation here
  constructor(props) {
    super(props);
    this.state = {
      input: "",
      imageUrl: "",
    };
  }

  // rest of the app logic
}

This would not have caused any issue if you would have initialized the state in the state field outside the constructor.

type AppState = {
  input: string;
  imageUrl: string;
}

class App extends Component {
  state: AppState = {
    input: "",
    imageUrl: ""
  }


  // rest of the app logic
}

In the second case, you can choose to provide a type argument for the props if the component is expecting some props. For example,

interface AppProps {
  // type info for props
}

type AppState = {
  input: string;
  imageUrl: string;
}

class App extends Component<AppProps> {
   state: AppState = {
      input: "",
      imageUrl: ""
   }

   // rest of the app logic
}