undefined variables react tutorial

Question

I'm working through the Tania Rascia React tutorial in an attempt to learn. I ran into a point where I have several errors showing up. The solution to them seems obvious, but I'm just confused if there is something I am missing, since this is the exact way the tutorials code is. This tutorial is officially endorsed by react, which is why I'm baffled. Am I doing something wrong? Or is the tutorial wrong?

Here are the errors:

Line 7: 'state' is not defined no-undef Line 27: 'removeCharacter' is not defined no-undef Line 39: 'characters' is not defined no-undef

and here is the code:

 //  eslint-disable-next-line
import React, { Component } from 'react';
import Table from './Table.js';

class App extends Component {
    render(){
        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;
            })
        });
    }

        return (
            <div className="container">
                <Table characterData={characters} />
            </div>
        );
    }
}

export default App;

The actual code in the tutorial is really different: github.com/taniarascia/react-tutorial/blob/… — Andrey
– Andrey, Commented Dec 19, 2018 at 14:46

iambinodstha · Accepted Answer · 2018-12-19 15:05:40Z

you seem to lack basic React concept please read react documentation along with your video tutorial.

import React, { Component } from 'react';
import Table from './Table.js';

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(){
      const { characters } = this.state;
      return (
            <div className="container">
                <Table characterData={characters} />
            </div>
        );
    }
}

export default App;

Quinten Steenwyk · Accepted Answer · 2018-12-19 15:05:28Z

2

@masmerino provided the correct answer. But to anyone who may view this post, the line 39 error was only solved after changing

 <Table characterData={characters} />

to this:

 <Table characterData={this.state.characters} />

answered Dec 19, 2018 at 15:05

Quinten Steenwyk

496 bronze badges

1 Comment

rickibarnes Over a year ago

For me, this is the correct answer: when following along the tutorial (and code all in the correct place!), you still get an error if you just use the code supplied in the tutorial. Was doing my head in, cheers.

Praveen Rao Chavan.G · Accepted Answer · 2018-12-19 14:52:50Z

1

Your code is misplaced.

return comes inside render and state and handlers comes outside the render.

Corrected code :

import React, { Component } from 'react';
import Table from './Table.js';

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} />
            </div>
        );
    }


    }
}

export default App;

edited Dec 19, 2018 at 14:52

answered Dec 19, 2018 at 14:46

Praveen Rao Chavan.G

2,8803 gold badges24 silver badges37 bronze badges

2 Comments

Quinten Steenwyk Over a year ago

God I'm dumb. Thanks for dealing with my idiocy :)

Praveen Rao Chavan.G Over a year ago

happy to help you

humanbean · Accepted Answer · 2018-12-19 20:46:00Z

state and removeCharacter have to be out of your render function

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} />
            </div>
        );
    }
}

export default App;

Mateito · Accepted Answer · 2021-05-20 03:04:09Z

I am currently following the same Tania tutorial and it gave me the error that removeCharacter was not declared and it was because I was writing it after RENDER. here is the code without errors

import React, {Component} from 'react'
import Table from './Table'


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

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

  render(){
    const { characters } = this.state

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

export default App

Collectives™ on Stack Overflow

undefined variables react tutorial

5 Answers 5

Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related