How to make input field text editable? - reactjs

Question

I have a problem of trying to make the input text field editable.
Currently, I am unable to edit the values of the input text field where i can remove or add new characters to the value in the input text field.
I have set the values statically in the state objects but I also want to edit the state values from the input text field.
How can I edit the code below to make the value editable?
import React, { Component } from 'react';
import { render } from 'react-dom';
class Info extends Component {
constructor(props) {
super(props);
this.state = {
name: "Jack Sparrow",
age: "52",
email: "jacksparrow52#gmail.com"
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
let newState = {...this.state};
newState[e.target.name] = e.target.name
this.setState({
...newState
})
}
render() {
return (
<div>
<input type="text" name="name" value={this.state.name} placeholder="Enter your name..." onChange={(e) => this.handleChange(e)} />
<br /> <br />
<input type="text" name="age" value={this.state.age} placeholder="Enter your age..." onChange={(e) => this.handleChange(e)} />
<br /> <br />
<input type="text" name="email" value={this.state.email} placeholder="Enter your email..." onChange={(e) => this.handleChange(e)} />
<h3>Output states:</h3>
<p id="name">Entered Name: {this.state.name}</p>
<p id="age">Entered Age: {this.state.age}</p>
<p id="email">Entered Email: {this.state.email}</p>
</div>
);
}
}
render(<Info />, document.getElementById('root'));

Answer 1

You are setting the state to the target input name. Fix this line
newState[e.target.name] = e.target.name
with (notice e.target.value)
newState[e.target.name] = e.target.value

Answer 2

Change your input field like this, Add input field name and bind handle Change inside the input field. Now you do not want to bind handle Change in constructor.
<input type="text" name="name" value={this.state.name} placeholder="Enter your name..." onChange={this.handelChange.bind(this, 'name')} />
Now replace handle change function,
handelChange(field, event) {
this.setState({
[field]: event.target.value
})
}

Answer 3

I hope this helps, I created a codesandbox with this solution
https://codesandbox.io/s/editable-inputs-m4fqk6?file=/src/App.tsx:256-2201
import { useState } from "react";
interface infoProfile {
name: string;
email: string;
}
const App = () => {
const [editCancel, setEditCancel] = useState(false);
const [value, setValue] = useState<infoProfile>({
name: "Anakin Skywalker",
email: "anakin#empire.com"
});
const onClick = (): void => {
setValue({ email: value.email, name: value.name });
setEditCancel(false);
};
return (
<>
<h1>Editable Inputs</h1>
<div>
<button onClick={() => setEditCancel(!editCancel)}>
{editCancel ? "Cancel" : "Edit"}
</button>
{editCancel && <button onClick={onClick}>Save</button>}
</div>
{!editCancel && (
<div>
<h2>Name</h2>
<div>{value.name}</div>
<h2>Email</h2>
<div>{value.email}</div>
</div>
)}
{editCancel && (
<div>
<h2>Name</h2>
<input
value={value.name}
onChange={(e) =>
setValue({ name: e.target.value, email: value.email })
}
/>
<h2>Email</h2>
<input
value={value.email}
onChange={(e) =>
setValue({ email: e.target.value, name: value.name })
}
/>
</div>
)}
</>
);
};
export default App;