Snippet of React code
class LoginIdCard extends Component {
constructor(props) {
super(props);
this.state = {
website: "",
username: "",
password: "",
editMode: false,
};
}
handleEdit = (fieldName, val) => {
this.setState({
[fieldName]: val,
});
};
creatLoginCardItem() {
const { logins } = this.props;
const { editMode } = this.state;
return logins.map((logins) => {
return (
<div className="card">
<button onClick={() => this.handleEdit("editMode", true)}>
edit
</button>
<p>{logins.website}</p>
<p>{logins.username}</p>
<p>{logins.password}</p>
</div>
);
});
}
render() {
const { editMode } = this.state;
return <>{editMode ? <input /> : this.creatLoginCardItem()}</>;
}
}
export default LoginIdCard;https://i.sstatic.net/CKXXb.png
The above code snippet generates a cards component that can be viewed here: web-app rendering
I aim to make the content within each card editable by clicking the edit button and using a form input. However, currently, all cards are replaced by a form when the edit button is clicked. I'm looking for a solution where each card can be edited individually and then saved to the store.