Deleting property from state object with key interpolation and destructuring
You cannot destructure dynamic keys like that, and updating state with a missing key will leave that key untouched, so it will not be removed from state.
You can set a state variable to undefined to remove it from state.
Example
class App extends React.Component {
state = {
foo: "Foo",
bar: "Bar"
};
deleteStateVariable = param => {
this.setState(prevState => {
const state = { ...prevState };
state[param] = undefined;
return state;
});
};
render() {
return (
<div>
<div>{JSON.stringify(this.state)}</div>
<button onClick={() => this.deleteStateVariable("foo")}>
Delete Foo
</button>
<button onClick={() => this.deleteStateVariable("bar")}>
Delete Bar
</button>
</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>
<div id="root"></div>If you are using hooks the argument you pass to setState will replace the current state entirely, so then you can destructure out the key you don't want.
Example
const { useState } = React;
function App() {
const [state, setState] = useState({
foo: "Foo",
bar: "Bar"
});
function deleteStateVariable(param) {
const { [param]: tmp, ...rest } = state;
setState(rest);
}
return (
<div>
<div>{JSON.stringify(state)}</div>
<button onClick={() => deleteStateVariable("foo")}>Delete Foo</button>
<button onClick={() => deleteStateVariable("bar")}>Delete Bar</button>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>I think you can write the dynamic destructuring like this:
let tmpVal = ""
const {[foo]: tmpVal, ...state} = this.state;
this.setState({state});
But it won't delete the property from the state.