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

Andrew Li
– Andrew Li

2018-04-21 04:14:10 +00:00
Commented Apr 21, 2018 at 4:14 — Andrew Li
– Andrew Li, Commented Apr 21, 2018 at 4:14

Code-Apprentice · Accepted Answer · 2018-04-21 14:11:15Z

2

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.

edited Apr 21, 2018 at 14:11

answered Apr 21, 2018 at 4:47

Code-Apprentice

84k26 gold badges162 silver badges289 bronze badges

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

Collectives™ on Stack Overflow

Declare and reuse variable in a React Class?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related