I cannot use "this" on a function

Question

I am new to React Native. I want to create a simple counter button. I could not use "this", it gives error ('this' implicitly has type 'any' because it does not have a type annotation.). You can see my TabTwoScreen.tsx TypeScript code below. I searched other questions but i could not find what to do. Why this is not working and how can I correct it. Waiting for helps. Thanks a lot.

import * as React from 'react';
import { StyleSheet, Button, Alert } from 'react-native';

import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';

export default function TabTwoScreen() {
  const state={
    counter: 0,
  }

  const but1 = () => {
    this.setState({counter : this.state.counter + 1});
  };


  return (
    
    <View style={styles.container}>
      <Text style={styles.title}>Counter:{state.counter}</Text>
      <Button
              title="Increment"
              onPress={but1}
              accessibilityLabel="increment"
              color="blue"
            />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: '80%',
  },
});

Error Message

Does this answer your question? ['this' implicitly has type 'any' because it does not have a type annotation](https://stackoverflow.com/questions/41944650/this-implicitly-has-type-any-because-it-does-not-have-a-type-annotation) — Rush W., Dec 29 '20 at 11:06
@SandeshSapkota I edited it. The problem still exists but it is solved by friends below. Thanks for help — İbrahim Yılgör, Dec 29 '20 at 11:14

Ketan Ramteke · Accepted Answer · 2020-12-29T11:32:36.023

App Output:

import React, { useState } from 'react';
import { StyleSheet, Button, Alert, Text, View } from 'react-native';

export default function TabTwoScreen() {
  //  You are using functional components so use the useState hook.
  const [counter, setCounter] = useState(0);

  const but1 = () => {
    // then you can increase the counter like below 
    setCounter(counter + 1);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Counter:{counter}</Text>
      <Button
        title="Increment"
        onPress={but1}
        accessibilityLabel="increment"
        color="blue"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

And if you want to use Class based component then here is the implementation:

import React, { useState, Component } from 'react';
import { StyleSheet, Button, Alert, Text, View } from 'react-native';

export default class TabTwoScreen extends Component {
 
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    };
  }

  but1 = () => {
    this.setState({ counter: this.state.counter + 1 });
  };
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Counter:{this.state.counter}</Text>
        <Button
          title="Increment"
          onPress={this.but1}
          accessibilityLabel="increment"
          color="blue"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

Working App: Expo Snack

score 0 · Answer 2 · answered Dec 29 '20 at 11:08

Please take a look at https://reactjs.org/docs/react-component.html#setstate Remove this from your code and let only state.count + 1

An example I did in freedcodecamp.

    handleChange(event){
    //event.target.value
    this.setState({
      input: event.target.value
    });
  }
  // Change code above this line
  render() {
    return (
      <div>
        { /* Change code below this line */}
        <input value={this.state.input} onChange={(e) => this.handleChange(e)}/>

Kapobajza · Answer 3 · 2020-12-29T11:19:27.537

That is because you are using a function component. You have to either use a class based component (React class and function components) or switch over to React hooks with the useState hook.

Here's the example with a class based component:

import * as React from 'react';
import { StyleSheet, Button, Alert } from 'react-native';

import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';

export default class TabTwoScreen extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0
    }
  }

  but1() {
    this.setState({ counter: this.state.counter + 1 });
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Counter:{state.counter}</Text>
        <Button
          title="Increment"
          onPress={this.but1}
          accessibilityLabel="increment"
          color="blue"
        />
      </View>
    );
  }
}

And here's with React hooks:

import React, {useState} from 'react';
import { StyleSheet, Button, Alert } from 'react-native';

import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';

export default function TabTwoScreen() {
  const [counter, setCounter] = useState(0);

  const but1 = () => {
    setCounter(counter + 1);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Counter:{counter}</Text>
      <Button
        title="Increment"
        onPress={but1}
        accessibilityLabel="increment"
        color="blue"
      />
    </View>
  );
}

I cannot use "this" on a function

3 Answers3