Altering react form but input value not editable

Question

I came from angularjs background, with 2 way binding I don't have to worry much, just declare a submit function, I can get the changed or unchanged value.

I'm stuck with react now. My input is not editable.

class HelloWorldComponent extends React.Component {

  constructor(){
    super();

    this.handleChange = this.handleChange.bind(this)
  }

  render() {
    const person = {"name":"james"};
    return (      
      <input onChange={this.handleChange} type="text" placeholder="name" value={person.name} />      
    );
  }

  handleChange(e){

  }
}

React.render(
  <HelloWorldComponent />, document.getElementById('react_example')
);

http://jsbin.com/huluqifanu/1/edit?js,console,output

Also what to do next? should I set the api data to a state first?

Answer 1

If you do not want to use Controlled Components then you can use Uncontrolled Components .

Specifically, you can use the defaultValue prop instead of value on your input .

As to your second question, you will have to be more clear what you are asking or perhaps better to ask in a separate Q altogether.