为什么在运行react js组件类时出现“ no-undef”错误？

我是新来反应js的人。我创建了一个扩展Component的类。当我运行我的代码时，它会引发错误，即未定义变量。我正在学习一个教程。这对于导师来说是正确的。但是我出错了。

App.js

import logo from './logo.svg';
import './App.css';
import React from 'react';
import TextCard from './textCard';


class App extends React.Component {

 
  
  textArr = [
    {
      id: 1,
      name:"Name1",
      department:"Computer",
      semester :7,
    },
    {
      id:2,
      name: "Name2",
      department: "Computer",
      semester: 7,
    },
    {
      id: 3,
      name: "Name3",
      department: "Computer",
      semester: 7,
    }
  ]

  

  textCards = this.textArr.map((item)=>{
    return (
      <TextCard  key={item.id} name={item.name} department={item.department} semester={item.semester} />
     )
  })

  hideOnClick(){
    alert('Hide btn pressed')
  }

  text1 = "Testing variable access"

  render(){
    return(
      <div className="App">
        <h1>My React js</h1>
        <h2>React js course from Udemy</h2>
        <hr></hr>
        <h3>JSX test</h3>
        <hr></hr>
        <div>{this.text1}</div>
        <hr></hr>
        <button onClick={this.hideOnClick}>Hide List</button>
        <div>
          {this.textCards}
        </div>
    </div>
    );
  }
 
}

export default App;

textCard.js

import React from 'react';
import classess from './textCard.module.css';

const TextCard = (props) =>{
    return(
        <div className={classess.dynamicTest}>
            <h2>{props.name}</h2>
            <p>{props.department}</p>
            <p>{props.semester}</p>
        </div>
    )
}

export default TextCard;

错误

编译失败。

src \ App.js第11：3行：未定义'textArr'no-undef
第34：3行：未定义'textCards'no-undef
第50：3行：未定义'text1'no -undef

搜索关键字以了解有关每个错误的更多信息。