ReferenceError: Can't find variable: state

Question

I'm recording an app that records exercise logs. If I click on the area, I'd like to have items that correspond to that area on the screen.

import React, { Component } from "react";
import {
  TouchableOpacity,
  StyleSheet,
  Text,
  View,
  FlatList,
} from "react-native";

let clickmenu = "";

class TouchableText extends Component {
  render() {
    clickmenu = this.props.children.item;
    return (
      <TouchableOpacity style={styles.text} onPress={this.props.press}>
        <Text style={styles.text}>{this.props.children.item.toString()}</Text>
      </TouchableOpacity>
    );
  }
}
class Detail extends Component {
  state = {
    data: {
      chest: [
        "플랫 벤치프레스",
        "인클라인 벤치프레스",
        "케이블 크로스오버",
        "푸쉬업",
        "딥스",
      ],
      back: ["바벨로우", "데드리프트", "턱걸이", "씨티드 로우", "렛풀 다운"],
    },
    menu: [
      "chest",
      "back",
      "legs",
      "shoulder",
      "biceps",
      "triceps",
      "abs",
      "etc..",
    ],
    isclicked: true,
  };
  press = () => {
    this.setState({
      isclicked: false,
    });
  };
  render() {
    const { data, menu, isclicked } = this.state;
    return isclicked ? (
      <View style={styles.container}>
        <FlatList
          data={this.state.menu.map((mp) => {
            return mp;
          })}
          renderItem={(item) => (
            <TouchableText press={this.press}>{item}</TouchableText>
          )}
        />
      </View>
    ) : (
      <View>
        {" "}
        {(function () {
          console.log(this);
          if (clickmenu == "가슴") {
            <FlatList
              data={this.state.data.가슴.map((mp) => {
                return mp;
              })}
              renderItem={(item) => <TouchableText>{item}</TouchableText>}
              keyExtractor={(item, index) => index.toString()}
            />;
          } else if (state.clickmenu == "등") {
            <FlatList
              data={this.state.data.등.map((mp) => {
                return mp;
              })}
              renderItem={(item) => <TouchableText>{item}</TouchableText>}
            />;
          } else {
            console.log("world");
          }
        })()}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "black",
  },
  text: { flex: 1, backgroundColor: "white", fontSize: 36, color: "black" },
});

export default Detail;

If I click on the chest button, The following error occurs: function(){if(){}} Does this mean class detail in ? How should I solve this?

Answer 1

You are missing a this .

Change

} else if (state.clickmenu == "등") {

to

} else if (this.state.clickmenu == "등") {

Answer 2

You need to set up a constructor with your state attributes within it as such:

class Detail extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoading: true,
      stateAttributesHere: "",
    };
  }
  ...
  ...
}

Answer 3

else if (state.clickmenu == "등") => else if (clickmenu == "등")