How do I pull items from MongoDB and update them when a new one is entered?

Question

I am trying to build a simple blog with React, Express, MongoDB and Node. But I am still confused on (1) how to correctly make the ajax request to my database and how do I set state and (2) how to properly update the state.

I've tried setting getInitialState by making an AJAX request, but it won't work. Also I don't know if that is best practice. Also, once someone adds a new post, where am I supposed to place the POST and then how do I properly update state?

var React = require('react');

var List = React.createClass({
  render: function() {
    return (
      <div>
        <h2>{this.props.postbody}</h2>
      </div>
    )
  }
})

// I'll break this up into smaller components later, but for now I just want 
// to know where to put my database entries into the posts array.
// The only field in MongoDB right now is postbody.

var Home = React.createClass({

  getInitialState: function() {
    return {
       posts: []
    }
  },

  handleClick: function() {
    $.ajax({
      type: 'GET',
      url: '/api/blogPosts',
      success: function(data) {
        this.setState = data;
        console.log(this.setState);
      }
    })
  },

  render: function() {
    return (
      <div>
        {this.state.posts.map(function(post) {

          return (
            <List postbody={post.postbody}></List>
          )
        })}

      </div>

    )
  }
})

score 1 · Accepted Answer · answered Nov 19 '15 at 05:21

1

setState is a function, not a property to be set on this. You should do this.setState(data)

answered Nov 19 '15 at 05:21

jtmarmon

5,727
7
28
45

just replace `this.setState = data` with `this.setState(data)` – jtmarmon Nov 19 '15 at 05:23
if you want the data to be loaded for the initial state rather than on click you can put it in `componentDidMount` – jtmarmon Nov 19 '15 at 05:24

How do I pull items from MongoDB and update them when a new one is entered?

1 Answers1