How to add key name and key value from Form? - reactjs

Question

I'm working on a React app and want the form I'm working on to be able to add key name and key value to sensorProperties: {} (sensorProperties is a part of sensor object). I have to allow user to give a name for both, key and value.
this.state = {
sensor: {
name: '',
type: '',
position: '',
sensorProperties: {}
},
show: false,
key: '',
value: ''
};
I added two functions handleValueChange and handleKeyChange. When I invoke console.log(key, value), I see they have my input values, but how can I pass these values to my sensorProperties?
handleKeyChange = (event) => {
const nKey = event.target.value
this.setState({key: nKey})
}
handleValueChange = (event) => {
const nValue = event.target.value
this.setState({value: nValue})
}
<FormGroup>
<ControlLabel>Key</ControlLabel>
<FormControl required type="text" value={key}
onChange={this.handleKeyChange}/>
</FormGroup>
<FormGroup>
<ControlLabel>Value</ControlLabel>
<FormControl required type="text" value={value}
onChange={this.handleValueChange}/>
</FormGroup>

Answer 1

You can change the handlers and set the sensorProperties like this:
handleKeyChange = (event) => {
const nKey = event.target.value
const value = this.state.value;
const newSensor = { ...this.state.sensor };
const newSensorProperties = {
[nKey]: value, // dynamically set the key name
};
newSensor.sensorProperties = newSensorProperties;
this.setState({
sensor: newSensor,
key: nKey,
});
}
handleValueChange = (event) => {
const nValue = event.target.value
const key = this.state.key;
const newSensor = { ...this.state.sensor };
const newSensorProperties = {
[key]: nValue, // dynamically set the key name
};
newSensor.sensorProperties = newSensorProperties;
this.setState({
sensor: newSensor,
value: nValue,
});
}
Depends on your need, the method above will only set one key-value pairs, and it also accepts an empty string as the key of the sensorProperties. If it is not want you want, you can just add an additional checking for empty string. The main idea is to use the computed key names for the newSensorProperties and that should solve the problem.