React equivalent to ng-model

Question

New to React, I have a TextField that I want to "bind" a value to it, I want it to change the value if the user enters value into the TextField and update the TextField if the value change through some API call.

Is there a way to do it ?

Answer 1

You can do this using state and onChange. Simple example included below:

<TextField
  onChange={(name) => this.setState({name})}
  value={this.state.name}
/>

A guide for updating TextInput based on a variable is located in the docs.

Answer 2

The way to do this in React is with state. Here's an example in JSX:

import React from 'react';

export default class MyForm extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      text: 'default',
      text2: 'default'
    }
  }

  onChange(e) {
    var obj[e.target.name] = e.target.value
    this.setState(obj);
  }

  render() {
    return (
      <div>
        <input type="text" name="text" value={this.state.text} onChange={this.onChange} />
        <input type="text" name="text2" value={this.state.text2} onChange={this.onChange} />
      </div>
    );
  }
}