React state depends on other state

Question

I am relatively new to React and I have something that seems simple but is not working:

state = {
  apple: false,
  orange: false,

  appleOrOrange: (this.state.apple || this.state.orange)
}

I get an error saying this.state.apple is undefined. Anyone know how I could fix this?

Does this answer your question? [Access object properties within object](https://stackoverflow.com/questions/12789141/access-object-properties-within-object) — Agney, Feb 28 '20 at 02:27
The thing is I want appleOrOrange to be updated when apple or orange is updated — Ken, Feb 28 '20 at 02:32

score 2 · Accepted Answer · answered Feb 28 '20 at 02:35

2

Do not create a state from another state. Compute the result always.

class extends Component {
  state = {
    apple: false,
    orange: false,
  }

  render() {
    const appleOrOrange = this.state.apple || this.state.orange;
    ...
  }
}

answered Feb 28 '20 at 02:35

Jim Jin

829
1
10
22

React state depends on other state

1 Answers1