CommentingSystem.js

import React, { Component } from 'react';
import { View, Text, TextInput, ListView } from 'react-native';
import CommentBox from './CommentBox';
import Comment from './Comment';

export default class CommentingSystem extends Component {
    constructor(props) {
        super(props);
        this.state = {
            newComment: '',
            comments: [],
        };

        this.textChangeHandler = this.textChangeHandler.bind(this);
        this.addComment = this.addComment.bind(this);
        this.updateDataSource = this.updateDataSource.bind(this);

        this.ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2
        });

        this.dataSource;
    }
    
    updateDataSource() {
        this.ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2
        });

        this.dataSource = this.ds.cloneWithRows(this.state.comments);
    }

    renderComment(comment) {
        return <Comment comment={comment} />
    }

    addComment() {
        let newComments = this.state.comments;
        newComments.push({
            author: "John Caraballo",
            text: this.state.newComment
        });
        this.setState({
            ...this.state,
            comments: newComments
        });
    }

    textChangeHandler(text) {
        this.setState({
            ...this.state,
            newComment: text
        });
    }

    componentWillMount() {
        this.updateDataSource();
    }

    componentWillUpdate() {
        this.updateDataSource();
    }

    render() {
        return (
            <View style={{ flex: 1 }}>
                <CommentBox textChangeHandler={this.textChangeHandler} addComment={this.addComment}/>
                <ListView
                dataSource={this.dataSource}
                renderRow={this.renderComment}
                />
            </View>
        )
    }
}