React JS representation not to re-render on setState ()

Question

Using js 0.13.1 and es6 reaction with babel:

I have an input for a file and a text box, I want the user to be able to select text files and add text to the text box.

When the onChange event occurs, it uses the FileReader API to read the file as text, and then calls it setState({text: <text from the file>}). This works fine.

The problem is that when you select and open a file in a text field, nothing happens ... it just saves the text with which it was initialized. It seems that reacting either does not update the view after setState(), or maybe I just messed up something. Not sure yet, but any help is appreciated!

here is my (simplified) code:

'use strict';

class TextApp extends React.Component {
  constructor() {
    this.state = {
      text: 'wow'
    };
  }

  readFile(e) {
    var self = this;
    var files = e.target.files;

    for (var i = 0, len = files.length; i < len; i++) {
      var reader = new FileReader();

      reader.onload = function(upload) {
        var textState = (self.state.text || '') + upload.target.result;
        self.setState({
          text: textState
        });
      };
      reader.readAsText(files[i]);
    }
  }

  render() {
    return (
      <div>
        <TextInput text={this.state.text} />
        <FileInput onChange={this.readFile} />
      </div>
    );
  }
}

class TextInput extends React.Component {
  render() {
    return (
      <textarea>{this.props.text}</textarea>
    );
  }
}

class FileInput extends React.Component {
  render() {
    return (
      <div>
          <input type="file" onChange={this.props.onChange} multiple />
      </div>
    );
  }
}

React.render(<TextApp />, document.getElementById('reappct'));

Answer 1

, @BinaryMuse, readFile,

<FileInput onChange={this.readFile.bind(this)} />

Answer 2

<textarea value={this.props.text} />. . Textarea?:

, defaultValue.