Updating State, but not re-rendering in ReactJS?

Question

I am very new to React and am just getting my feet wet. I'm having a hard time understand why this isn't re-rending the List. Here is my code:

app.jsx

var Hello = React.createClass({
  getInitialState: function() {
    return {
      links: ['test ']
    }
  },
  render: function() {
    return <div className = "row">
      <Submission linkStore = {this.state.links}/>
      <List links = {this.state.links} />
    </div>

  }
});

var element = React.createElement(Hello, {});
ReactDOM.render(element, document.querySelector('.container'));

In my submission.jsx I have this function to push info into the links array

  handleSubmitClick: function() {
    this.props.linkStore.push(this.props.text)
    this.setState({text: ''})
    console.log(this.props.linkStore)
  }

My list.jsx looks like this

module.exports = React.createClass({
  getInitialState: function() {
    return {
      links: this.props.links
    }
  },
  render: function() {
    return <div>
      {this.props.links}
    </div>
  }
});

Everything works as intended and I can get the test to show appropriately.

I am aware that this isn't going to show up as an actual list and that I should create a list component to show the items in list form. I'm just trying to run tests along the way to see how everything works.

Hi, to pass value from children to parent, your need to declare callback function that is triggered in child to update parent state. Never update props but state and pass data child -> parent with callbacks. — MacKentoch
– MacKentoch, Commented Feb 2, 2016 at 4:59

Amuzr · Accepted Answer · 2016-02-02 05:59:09Z

1

Use parent state instead of child props.

try this

app.jsx

var Hello = React.createClass({
  getInitialState: function() {
    return {
      links: ['test ']
    }
  },
  handleListSubmitClick: function(params) {
      this.setState({links:params});
  },
  render: function() {
    return <div className = "row">
      <Submission linkStore = {this.state.links} handleListSubmitClick={this.handleListSubmitClick}/>
      <List links = {this.state.links} />
    </div>

  }
});

submission.jsx

handleSubmitClick: function() {
    var linkStore = this.props.linkStore;
    linkStore.push(this.props.text)
    this.setState({text: ''})
    this.props.handleListSubmitClick(linkStore);
  }

but I don't understand this.props.text. input's value using this.refs.ref

list.jsx

module.exports = React.createClass({
  getInitialState: function() {
    return {
      links: this.props.links
    }
  },
  render: function() {
    return <div>
      {this.props.links}
    </div>
  }
});

answered Feb 2, 2016 at 5:59

Amuzr

10610 bronze badges

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

1 Comment

Elliott McNary Over a year ago

This worked...thank you very much! I understand why it works as well

Collectives™ on Stack Overflow

Updating State, but not re-rendering in ReactJS?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related