react-tutorial icon indicating copy to clipboard operation
react-tutorial copied to clipboard

'characters' is not defined

Open RickHankel opened this issue 5 years ago • 2 comments

I get this error when adding the removeCharacter method to the App component and I can't figure out what's wrong, please help.

./src/App.js
  Line 39:31:  'characters' is not defined  no-undef

Search for the keywords to learn more about each error.
class App extends Component {
  state = {
    characters: [
      {
          name: 'Charlie',
          job: 'Janitor'
      },
      {
          name: 'Mac',
          job: 'Bouncer'
      },
      {
          name: 'Dee',
          job: 'Aspiring actress'
      },
      {
          name: 'Dennis',
          job: 'Bartender'
      }
  ]
  }

  removeCharacter = (index) => {
    const {characters} = this.state
  
    this.setState({
      characters: characters.filter((character, i) => {
        return i !== index
      }),
    })
  }

  render () {
    return (
      <div className='container'>
        <Table characterData={characters} removeCharacter={this.removeCharacter} />
      </div>
    )
  }
}

RickHankel avatar Oct 17 '20 08:10 RickHankel

@RickHankel missing characters in render scope

render () {
    const {characters} = this.state
    return (
      <div className='container'>
        <Table characterData={characters} removeCharacter={this.removeCharacter} />
      </div>
    )
  }

somsakra avatar Nov 08 '20 14:11 somsakra

class App extends Component {
  state = {
    characters: [
      {
        name: 'Charlie',
        job: 'Janitor'
      },
      {
        name: 'Mac',
        job: 'Bouncer'
      },
      {
        name: 'Dee',
        job: 'Aspiring actress'
      },
      {
        name: 'Dennis',
        job: 'Bartender'
      }
    ]
  }

  removeCharacter = (index) => {
    const { characters } = this.state;

    this.setState({
      characters: characters.filter((character, i) => {
        return i !== index;
      }),
    })
  }

  render() {
    return (
      <div className='container'>
        <Table characterData={this.state.characters} removeCharacter={this.removeCharacter} />
      </div>
    )
  }
}

The characters variable is not defined within the scope of the render method. It is defined within the scope of the state object.

palashshah110 avatar Dec 23 '23 09:12 palashshah110