I'm not quite sure why I'm getting this error.

class ContentProcessing extends Component {

    constructor(props) {
        super(props);

        this.state = {content: currentData};
        this.setData = this.setData.bind(this);
    }

    setData(data) {
        this.setState({
            content: data
        });
    }

    render() {
        return (
                <div>
                    <Card title={this.state.content} />
                </div>
        );
    }
}

The error is reported at

    this.setState({
        content: data
    });

Basically I'm launching setData from a Button in another class, as soon as I click it my page breaks and I receive the error.

I checked and it looks like in setData(), this.state is undefined so I suppose that's probably where the problem es from.

I've looked at a few other answers that were having this same problem but their fixes don't seem to be working for me.

I'm not quite sure why I'm getting this error.

class ContentProcessing extends Component {

    constructor(props) {
        super(props);

        this.state = {content: currentData};
        this.setData = this.setData.bind(this);
    }

    setData(data) {
        this.setState({
            content: data
        });
    }

    render() {
        return (
                <div>
                    <Card title={this.state.content} />
                </div>
        );
    }
}

The error is reported at

    this.setState({
        content: data
    });

Basically I'm launching setData from a Button in another class, as soon as I click it my page breaks and I receive the error.

I checked and it looks like in setData(), this.state is undefined so I suppose that's probably where the problem es from.

I've looked at a few other answers that were having this same problem but their fixes don't seem to be working for me.

• javascript
• reactjs

Share Improve this question Follow edited Mar 31, 2018 at 20:44 lpetrucci asked Mar 31, 2018 at 20:16 lpetruccilpetrucci 1,73966 gold badges3030 silver badges5353 bronze badges 3

• You're not using this.state in setData()? – Aman B Commented Mar 31, 2018 at 20:27
• I'm not because I can't, I need to use this.stestate or it won't actually change this.state – lpetrucci Commented Mar 31, 2018 at 20:28
• Nothing seems to be wrong with the code you've posted here. You need to post how you're creating the ponent and calling setData function, maybe we can help you then – Aman B Commented Mar 31, 2018 at 21:57

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

This error is because this.setState in not bind to this in main class. If you want to pass setState to somewhere else you need to bind it first in its main class:

class ContentProcessing extends Component {

constructor(props) {
    super(props);

    this.state = {content: currentData};
    this.setData = this.setData.bind(this);
    this.setState = this.setState.bind(this); // <- try by adding this line
}}

Inside your constructor you have:

this.state = {content: currentData};

Where does currentData e from? If it's supposed to be passed as a prop, then change that line to:

this.state = {content: prop.currentData};

I guess you are calling setData from Card ponent.

If this is the case, send setData as a prop to Card ponent

// Below code snippet in ContentProcessing ponent
<div>
  <Card
    title={this.state.content}
    setData={this.setData}
  />
</div>

Now you can access setData method in Card ponent as prop.

// Call it in Card ponent
this.props.setData(data);

This setData is useless as it will just stay undefined all the time

setData(data) {
        this.setState({
            content: data
        });
    }

You can some sort of event which will be responsible for setState() Something like :

   render() {
        return (
                <div>
                    <Card title={this.state.content} onClick={() => {this.setData}}/>
                </div>
        );
    }
}