CODEWITHSUNDEEP
javascriptreactjs
Eldar Nezametdinov
Eldar Nezametdinov

Reputation: 1925

How to say to React that data is already updated?

As you guessed, I'm newbie in JS and especially in React.

I have a variable list for saving my calculations. I have one handler for drag-drop and form, but when data is updated, react still doesn't know about that.

Should I use some special command for update this.props.data or the better way is write all logic in React components?

btw, list consists of runs[]. Each run have id and balls[]. The ball have counter and value.

/** @jsx React.DOM */

var Table = React.createClass({
    render: function() {
        return  (<table className='table table-bordered bg-success'>
        {this.props.data.map(function (run){
            return <TablesRun runId={id}/>;
        })}
            </table>);
        }
});

var TablesRun = React.createClass({
    render: function() {
        return  <tr className='bg-warning'>
                    <td>
                        <span className='badge'>{this.props.runId}</span>ff
                    </td>
                </tr>;
    }
});

React.renderComponent(<Table data={list.runs}/>,
    document.getElementById('runTable'));

enter image description here

Upvotes: 2

Views: 228

Answers (2)

Paul O&#39;Shannessy
Paul O&#39;Shannessy

Reputation: 2498

If you update the list variable outside of React components, you need to tell React to render again. React does not use data binding to know that you've modified a variable.

Simply call React.renderComponent(<Table data={list.runs}/>, document.getElementById('runTable')); again and React will update the DOM with the new prop value.

Upvotes: 3

Douglas
Douglas

Reputation: 37761

Should I use some special command for update this.props.data

Yes, use setProps rather than updating the objects directly. However, note the warning on the documentation page: calling setProps usually isn't needed, and only works on the root component.

Upvotes: 0

Related Questions