Accessing state between files in ReactJS

Question

I'm trying to learn me some React but can't seem to understand it.
How would I access this.state.planet in newMove()?
Uncaught TypeError: Cannot read property 'state' of undefined is what I get.

Here is app.js

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = newPlay();
  }

  render() {
    return (
      <div>
        <button onClick={(e) => newMove(e)}>New Move</button>
      </div>
    );
  }
}

and here is logic.js

export const newPlay = () => ({
  planet: 'Earth',
  position: [0, 0, 0, 0, 0, 0, 0, 0, 0],
  active: true,
  shots: 5
});

export const newMove = () => {
  let player = this.state.planet === 'Earth' ? 'Human' : 'Alien';
  console.log(player);
  this.setState({
    shots: this.state.shots++,
    active: false
  })
}

You need to learn how this and arrow functions work. That has nothing to do with React but basic JavaScript. When you call the function with newMove(e), how should JavaScript know that this should refer to your component instance? I recommend to read developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Felix Kling
– Felix Kling, Commented Apr 30, 2018 at 21:48
Besides the issue with this, you don't want to update the components state based on this.state. Pass a function to setState instead. See reactjs.org/docs/react-component.html#setstate . — Felix Kling
– Felix Kling, Commented Apr 30, 2018 at 22:05

Håken Lid · Accepted Answer · 2018-04-30 22:06:07Z

2

To make this work as intended in the newMove function, you have to bind it to the class instance this in your constructor method.

Note that you can't use arrow notation syntax for newMove. Arrow functions don't support rebinding this. Use function instead.

export function newMove() { 
  ...
}

Then bind it in the App class, and use the bound this.newMove in your onClick prop.

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = newPlay();
    this.newMove = newMove.bind(this); 
  }

  render() {
    return (
      <div>
        <button onClick={this.newMove}>New Move</button>
      </div>
    );
  }
}

edited Apr 30, 2018 at 22:06

answered Apr 30, 2018 at 21:54

Håken Lid

23.2k10 gold badges58 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

dwa Over a year ago

Thanks for your input, even after going this way I get the error, "Uncaught TypeError: Cannot read property 'state' of undefined". It's about the line in newMove, "let player = this.state.planet === 'Earth' ? 'Human' : 'Alien';"

Felix Kling Over a year ago

@Shamaran: Seems like you forgot to updated the function definition to a non-arrow function.

dwa Over a year ago

Thanks guys, I posted comment and missed the update!

murrayju Over a year ago

I don't think that it is good practice to have code external to the class modifying its state. It would be better to make newMove an instance method of the App.

Håken Lid Over a year ago

@murrayju Why do you think that is bad practice? And what do you mean by "external code"? Is it ok to use class inheritance, or should we define our own Component.setState as well?

|

Collectives™ on Stack Overflow

Accessing state between files in ReactJS

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related