React sending data to parent component

Question

I load paginated messages in a subcomponent from an API and send the jsonData to the parent component to handle displaying the messages to the UI. I successfully achieved this with the below code but I was told my design and data passing was questionable --- Specifically in my MoreMessages component.

Anyone see what is questionable about my attempt?

MoreMessages.js

/* In the subcomponent I simply render a button, when it is clicked I fetch the messages and send the data to the parent component using self.props.setMessages(jsonData) */

export default class MoreMessages extends React.Component {
  constructor() {
    super()
    this.state = {
      pages: 1
    }
  }

  handleClick() {
    var self = this

    this.setState({ pages: this.state.pages+1 }, () => {
      var url = process.env.URL+'?page='+this.state.pages
      const fetchMessages = fetch(url, {credentials: 'same-origin'})

      function loadMyMessages(data) {
        data.json().then((jsonData) => {
          console.log("Sending the jsonData to props in Layout component");
          self.props.setMessages(jsonData)
        })
      }

      fetchMessages.then(loadMyMessages)
    });
  }

  render() {
    return (
      <div id="more-messages">
        <button onClick={this.handleClick.bind(this)}>More Messages</button>
      </div>
    )
  }
}

Layout.js

/* Then simply the data gets passed to the parent component using the setMessages method, which updates the messages state, and the MessageList component updates the UI */

export default class Layout extends React.Component {
  constructor() {
    super()
    this.state = {
      messages: []
    }
  }

  componentWillMount() {
      var self = this
      const fetchMessages = fetch(process.env.URL, {credentials: 'same-origin'})

      function loadMyMessages(data) {
        data.json().then((jsonData) => {
          self.setMessages(jsonData)
        })
      }

      fetchMessages.then(loadMyMessages)
    }

    setMessages(data) {
      var messageArr = []
      data.messages.map((r) => {
        messageArr.push(r)
      })

      this.setState({
        messages: this.state.messages.concat(messageArr),
      })
    }

  render() {
    return (
      <div id="componentLayout">
            <MessageList messages={this.state.messages}/>
            <MoreMessages setMessages={this.setMessages.bind(this)} />
      </div>
    )
  }
}

Is anything wrong or not recommended with this design?

Answer 1

In your Layout component do this:

export default class Layout extends React.Component {
    constructor(props) {
        super(props)

        // ...

        this.setMessages = this.setMessages.bind(this);
        this.handleLoadMore = this.handleLoadMore.bind(this);
  }

  // ...

  handleLoadMore() {
      // your call to retrieve more data
  }

  render() {
      return (
          <div id="componentLayout">
              <MessageList messages={this.state.messages}/>
              <MoreMessages
                  setMessages={this.setMessages}
                  onLoadMore={this.handleLoadMore} />
           </div>
       );
    }
}

In your MoreMessages component you can now do the following:

render() {
    return (
        <div id="more-messages">
            <button onClick={this.props.onLoadMore}>More Messages</button>
        </div>
    );
}