CODEWITHSUNDEEP
reactjstypescriptsemantic-ui
jpskgc
jpskgc

Reputation: 777

'this' implicitly has type 'any' because it does not have a type annotation.ts(2683) : An outer value of 'this' is shadowed by this container

I'm implementing onChange method to delete uploaded image.
But compile error occurs, so I want to know solution.

front: React
css: semantic-ui-react

  constructor(props: {}) {
    super(props);
    this.state = {
      title: '',
      content: '',
      redirect: false,
      files: [],
    };
    this.handleRemove = this.handleRemove.bind(this);
  }

  handleRemove() {
// some code
}

  render() {
    return (
          <List>
            {(this.state.files || []).map(function(file, i) {
            // error occurs at onclick
              return <List.Item icon="image" content={file.name} onclick={this.handleRemove}/>;
            })}
          </List>
    );
  }

The full soruce code is here:
https://github.com/jpskgc/article/blob/master/client/src/components/Detail.tsx

On the this.handleRemove, the following error occurs.
I want to resolve this error.

any
'this' implicitly has type 'any' because it does not have a type annotation.ts(2683)
Post.tsx(115, 49): An outer value of 'this' is shadowed by this container.

Upvotes: 1

Views: 3731

Answers (1)

Domino987
Domino987

Reputation: 8774

You have to use an arrow function within your map function so that 'this' is passed into your map function:

map((file,I) => {...}) Instead of map(function(file,I){})

Upvotes: 3

Related Questions