State is undefined in React

Question

I have a simple class component in react and what I am trying to do is to save a string variable inside the component's state and pass it as a value via a prop. I am passing it but I get the error that state is not defined, why? What am I doing wrong, how can I pass the state variable correctly? Here is my code:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Upload } from '@progress/kendo-react-upload';

class CustomListItemUI extends React.Component {
  render() {
    const { files } = this.props;
    return (
      <ul>
        {files.map((file) => (
          <li key={file.name}>
            {file.name}
            <button onClick={(e) => this.props.onRemove(file.uid)}>
              remove
            </button>
          </li>
        ))}
      </ul>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    state = {
      remoteUrl:
        'localhost:3001/applicationImages/318c7960-f28b-4daf-bd8f-97449091d344',
    };
  }

  render() {
    return (
      <div>
        sometext
        <Upload
          batch={true}
          multiple={true}
          defaultFiles={[]}
          withCredentials={false}
          listItemUI={CustomListItemUI}
          saveUrl={'https://demos.telerik.com/kendo-ui/service-v4/upload/save'}
          removeUrl={this.state.remoteUrl}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector('my-app'));

And here is an example:

https://stackblitz.com/edit/react-qvxy4m-rwom28?file=app/main.jsx

Answer 1

In App constructor you need this.state={ ... } instead of state={ ... }