In a react class: How do I pass a variable inside same component

Question

I'm learning ReactJS and need to pass a variable inside the same component.

Here's an example

var DataBase = [
    {
        position: 1
    },
    {
        position: 2
    },
    {
        position: 3
    },
    {
        position: 4
    }
];

var Component = React.createClass({

    getDefaultProps: function() {
        var counter = 0;
    },

    componentDidMount: function() {
        var dbPos = this.props.db[counter+1].position;
        return dbPos;
    }, 

    render: function () {
         return (
            <div className="Component">
                {this.dbPos}
            </div>
         ); 
    }
});

ReactDOM.render(
    <Component db={DataBase} />,
    document.getElementById('main')
);

So, this obviously doesn't work. What I need is to pass var dbPos created in componentDidMount to the render (without any events like onClick). This will be time driven, like 10 seconds in each position with setTimeout().

Is this possible? How? Is there a better solution? I'll appreciate all your help.

You can attach variables to this, or have a method like getDbPosition — nanobar
– nanobar, Commented Mar 28, 2016 at 16:37

E_net4 · Accepted Answer · 2016-03-28 16:54:03Z

That problem may regard state handling. There are multiple ways to handle the application's state in a React application, but I will assume that you are interested in keeping dbPos as part of the component's state (and that you may be mutating it in the future). To achieve this, simply use this.setState and this.state.

Before I show the example, I will state a few other mistakes in your code snippet:

getDefaultProps should return a hash object of the props, not declare them with var (that would make them scoped to the method rather than the component instance)
counter, as a prop, must be referred as this.props.counter. Note that counter is not part of this component's state, and can only change with a respective change of that prop in an upper level of the component tree.

With that in mind:

var Component = React.createClass({

    getDefaultProps: function() {
        return {counter: 0};
    },

    componentDidMount: function() {
        var dbPos = this.props.db[this.props.counter+1].position;
        this.setState({ // change the state of this component
          dbPos: dbPos
        })
    },

    render: function () {
         return (
            <div className="Component">
                {this.state.dbPos}
            </div>
         ); 
    }
});

If you do not want dbPos to mutate as part of the component's state, simply make a new method for retrieving the intended position. No mutable state will be involved here.

var Component = React.createClass({

  getDefaultProps() {
    return {counter: 0};
  },

  componentDidMount() {
    // no longer needed
  },    
  getPosition() {
    return this.props.db[this.props.counter + 1].position;
  },

  render () {
    return (
        <div className="Component">
            {this.getPosition()}
        </div>
      ); 
  }
});

That didn't work. Console return (this.state is null) EDIT: yeah, with that 2nd method it works! :) Thanks!

Collectives™ on Stack Overflow

In a react class: How do I pass a variable inside same component

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related