Declare and reuse variable in a React Class?

Question

With pure functions in React it's easy to make any variable you create reusable by any other nested functions:

const myComponent = props => {
  const {something} = props.nested;

  const nestedFunction = () => {
    if (something === "value") return true
  }

  const otherNestedFunction = () => {
    console.log(otherNestedFunction)
  }

  return (
    // markup
  )
}

Can you do something similar with a React class? At the moment Im having to repeat creating the variable.

class myComponent extends React.Component() {

  nestedFunction() {
    const {something} = props.nested;
    if (something === "value") return true
  }

  otherNestedFunction() {
    const {something} = props.nested;
    console.log(otherNestedFunction)
  }

  render(){
    return (
      // markup
    )
  }
}

Possible duplicate of [ES6 class variable alternatives](https://stackoverflow.com/questions/22528967/es6-class-variable-alternatives) — Andrew Li, Apr 21 '18 at 04:14

Code-Apprentice · Accepted Answer · 2018-04-21T14:11:15.630

To share variables among functions of an ES6 class, use member variables. React provides props as a member variable which you can access with this.props:

class myComponent extends React.Component() {

  nestedFunction() {
    if (this.props.nested === "value") return true
  }

  otherNestedFunction() {
    console.log(this.props.nested)
  }

  render(){
    return (
      // markup
    )
  }
}

Note that you should never assign or otherwise chance the value of any props. Instead, use state with this.setState() to update internal component state and trigger lifecycle events to update children components.

Declare and reuse variable in a React Class?

1 Answers1