Input filed is not clickable in react while using value attribute - reactjs

Question

This is the very beginning of my react learning. I am facing some issue about input field. If I use value field in form then this input filed become unchangeable. Like I can't write anything on that filed. But while I remove value filed it work fine.
Here is my code
import React, { Component } from 'react';
export class Registration extends Component{
constructor(){
super();
this.state = {
name: '',
email: '',
password: '',
};
this.onChange = this.onChange.bind(this);
}
onChange(e){
this.setState = ({
name: e.target.value
});
}
render(){
return(
<div className="registration">
<form name="registration" id="registration" >
<div className="userName">
<label> Name : </label>
<input name="name" type="text" onChange={this.onChange} value={this.state.name}/>
<br/>
</div>
<label> Email : </label>
<input name="email" type="email" />
<br/>
<label> Password : </label>
<input name="password" type="password" />
<br/>
</form>
</div>
);
}
}
On the name input field I am using value attribute. This is making this issue.

Answer 1

The problem is that you accidentally wrote
this.setState = ({
name: e.target.value
});
Instead of
this.setState({
name: e.target.value
});
The = is incorrect, as you're trying to call a method and not declare a variable with a dictionary.

Answer 2

Your this.setState is set wrong.
class Registration extends React.Component {
constructor() {
super();
this.state = {
name: "",
email: "",
password: ""
};
this.onChange = this.onChange.bind(this);
}
onChange(e) {
this.setState({
name: e.target.value
});
}
render() {
return (
<div className="registration">
<form name="registration" id="registration">
<div className="userName">
<label> Name : </label>
<input
name="name"
type="text"
onChange={e => this.onChange(e)}
value={this.state.name}
/>
<br />
</div>
<label> Email : </label>
<input name="email" type="email" />
<br />
<label> Password : </label>
<input name="password" type="password" />
<br />
</form>
</div>
);
}
}
ReactDOM.render(<Registration />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />