CODEWITHSUNDEEP
javascriptreactjs
CCD
CCD

Reputation: 492

State Remains Undefined in React

I am new to web-dev, and I'm trying to learn React. I have been stuck at one point in a tutorial I've been following and can't seem to get passed it. I am trying to store some data in a state. However, when I try and reference it I get the error 'Line 45: 'characters' is not defined no-undef'. I've tried a couple fixes, none of which seem to be working. Here is my code:

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

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            characters: [
                {
                    'name': 'Charlie',
                    'job': 'Janitor',
                    'specialskill': 'Rat Bash'
                },
                {
                    'name': 'Mac',
                    'job': 'Body Guard',
                    'specialskill': 'Occular Pat-Down'
                },
                {
                    'name': 'Dee',
                    'job': 'Aspring actress',
                    'specialskill': 'Essence of Bird'
                },
                {
                    'name': 'Dennis',
                    'job': 'Bartender',
                    'specialskill': 'The Implication'
                },
                {
                    'name': 'Frank (But Not Really)',
                    'job': 'Duper',
                    'specialskill': 'Egg of Trying Times'
                }
            ]
        };
    }

    render() {  
        return (
            <div className="container">
                <h1>The Gang</h1>
                <body>
                    <Table 
                        characterData={characters}
                        removeCharacter={this.removeCharacter}
                    /><
                /body>
                <body><WhatDoNow /></body>
            </div>
        );
    }

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

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



export default App;

This is the Table class.

import React, {Component} from 'react';

class Table extends Component {
    render() {
        const { characterData } = this.props;

        return (
            <table>
                <TableHeader />
                <TableBody characterData={characterData} />
            </table>
        );
    }
}

const TableHeader = () => { 
    return (
        <thead>
            <tr>
                <th>Name</th>
                <th>Job</th>
                <th>Special Skills</th>
            </tr>
        </thead>
    );
}

const TableBody = (props) => { 

    const rows = props.characterData.map((row, index) => {
        return (
            <tr key={index}>
                <td>{row.name}</td>
                <td>{row.job}</td>
                <td>{row.specialskill}</td>
            </tr>
        );
    });

    return (
        <tbody>
        {rows}
        </tbody>
    );
}

export default Table;

Upvotes: 1

Views: 122

Answers (3)

user7143559
user7143559

Reputation:

Replace characterData={characters} with characterData={this.state.characters} in App.js

Upvotes: 1

Maielo
Maielo

Reputation: 732

I think you have used undeclared variable characters as error suggests Here:

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

which should be

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

Upvotes: 1

Mohammad Albakri
Mohammad Albakri

Reputation: 79

When passing characters to the Table make sure you pass it ass this.state. So characterData={this.state.characters}

Hope that helps.

Upvotes: 1

Related Questions