Reset state to initial state only for specific state variables - reactjs

Question

I want to reset state's variable to initial only for specific value
I have tried this:
const initialState={
name:'',
location:'',
....
....
....
}
this.state={
...initialState,
spinner:false,
open:false,
errorMessage:''
}
resetToInitialState = () =>{
this.setState(...initialState);
}
I am calling this resetToInitialState inside a function like this.resetToInitialState();
<TextField
id="outlined-name"
label="Machine id"
className={classes.textField}
InputProps={{
classes: {
input: classes.text,
},
}}
value={ !name && null } //tried this not working
onChange={e => this.setState({name: e.target.value})}
margin="normal"
variant="outlined"
/>

Answer 1

You forgot {}
this.setState({...initialState})

Answer 2

When you try to reset state, you need to clone initial state. If you pass in a reference to initialState, that will get mutated when you change state.
this.setState({...initialState});
To create a controlled component, TextField needs the value to be this.state.name.
<TextField
id="outlined-name"
label="Machine id"
className={classes.textField}
InputProps={{
classes: {
input: classes.text,
},
}}
value={ this.state.name }
onChange={e => this.setState({name: e.target.value})}
margin="normal"
variant="outlined"
/>
Edit: Reset TextField component when value is My Value
If you only want to reset the state when name is a specific value, you need to create a different onChange function and set onChangeReset to the onChange prop in the TextField component.
onChangeReset = e => {
if(e.target.value === 'My Value') {
this.resetToInitialState();
else {
this.setState({ name: e.target.value});
}
}
<TextField
onChange={this.onChangeReset}
value={this.state.name}
/>
Edit: Add multiple TextField components with reset function to reset all of the TextField components at the same time.
import React, { Component } from 'react';
class MyGroupedTextFields implemements Component {
constructor(props) {
super(props);
this.state = {
fields: {},
spinner: false,
open: false,
errorMessage: ''
};
}
resetTextFields = () => {
const state = { ...this.state };
state.fields = {};
this.setState({ state });
}
onTextFieldChange = event => {
const fields = {...this.state.fields};
fields[event.target.name] = event.target.value;
this.setState({ fields });
}
submit = async () => {
// perform submit network request
// pseudo code
const response = await submitForm(this.state.fields);
}
render() {
return (
<div>
<TextField
name='textField1'
onChange={this.onTextFieldChange}
value={this.state.fields.textField1}
/>
<TextField
name='textField2'
onChange={this.onTextFieldChange}
value={this.state.fields.textField2}
/>
<TextField
name='textField3'
onChange={this.onTextFieldChange}
value={this.state.fields.textField3}
/>
<button onClick={this.resetTextFields}>
Reset
</button>
<button onClick={this.submit}>
Submit
</button
</div>
);
}
}