One Way Data Binding (React)

by Volkan Şengül

HTML

<div id="container"></div>

Babel + JSX

class SimpleComponent extends React.Component {
  constructor(props, ...args) {
    super(props, ...args);
    this.handleChange = this.handleChange.bind(this);
    this.state = {value: this.props.value};
  }
  handleChange(e) {
    this.setState({value: e.target.value});
  }
  render() {
    return (
      <div>
        <p>Değer: {this.state.value}</p>
        <input value={this.state.value}
             onChange={this.handleChange} />
      </div>
      );
  }
}

React.render(<SimpleComponent value={'volkan'} />,  document.getElementById('container'));