CODEWITHSUNDEEP
javascriptreactjs
jbarradas
jbarradas

Reputation: 2161

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

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.

Upvotes: 0

Views: 3219

Answers (1)

E_net4
E_net4

Reputation: 29972

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>
      ); 
  }
});

Upvotes: 4

Related Questions