Unable to Edit the Material UI Textfields in React - reactjs

Question

I am new to React ,
I tried to design a form using material UI in React.
I was able to design the form with textfields but unable to edit the data if i use value attribute to the textfield.
And how can i call a parent function when onChange function is called for Textfield which is there in child component.Here is my Code.
In the parent Component i am including like this
render() {
const { name, email, mobileNumber } = this.state.serviceRequest;
return (
<div>
<HomeTemplate
handleShow = {this.handleShow}
handleClose = {this.handleClose}
name = {name}
email ={email}
mobileNumber = {mobileNumber}
DateFnsUtils ={DateFnsUtils}
handleDateChange ={this.handleDateChange}
handleChange = {this.handleChange}
/>
</div>
);
}
In the child component i am having Text field like this. due to unable to post the whole code i am posting part of the code which is useful to get the problem.
I will post paste bin link in comments also.
<TextField
autoFocus
margin="dense"
id="emailId"
label="Email Address"
type="email"
value= {props.email}
fullWidth
/>
Please suggest me how can i do this?

Answer 1

You can send a function of Parent as a prop to the Child and set that as onChange prop of TextField.
For example, let's say your Child component looks like this:
function Demo(props) {
return (
<TextField
fullWidth
id="standard-name"
label="Name"
value={props.name} // it gets value from prop
onChange={props.onNameChange} // it gets handler function from prop too!
margin="normal"
/>
);
}
Now your parent component is responsible to send both props.name and props.onNameChange:
class App extends React.Component {
state = {
name: "Sleepy cat"
};
handleNameChange = event => {
this.setState({ name: event.target.value });
};
render() {
return (
<Demo
onNameChange={this.handleNameChange} // send a function as prop, that will change the state in parent
name={this.state.name} // send the state of parent to child
/>
);
}
}
Here is the full demo:
const {TextField} = window['material-ui'];
function Demo(props) {
return (
<TextField
fullWidth
id="standard-name"
label="Name"
value={props.name}
onChange={props.onNameChange}
margin="normal"
/>
);
}
class App extends React.Component {
state = {
name: "Sleepy cat"
};
handleNameChange = event => {
this.setState({ name: event.target.value });
};
render() {
return (
<div>
<code>{"Parent State: " + JSON.stringify(this.state)}</code>
<Demo onNameChange={this.handleNameChange} name={this.state.name} />
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/#material-ui/core#3.9.2/umd/material-ui.production.min.js"></script>
<div id="root"></div>

Answer 2

What you want to achieve is a common need a developer requires when building application using react.
You want the child component to the reflect the changing data when calling onChangeevent.
Note, the child component can have its own state but in case there are several components that need to reflect the same changing data you can lift the state up to the closest ancestor.
#mehamasun has already illustrated how to do that in his example.
Parent(state) -> Child(props) -> //Event called -> Parent(state changed via event handler) -> rerender Child(props)