<div>
<label>Last Name</label>
<input
type="text"
name="lastName"
defaultValue={userData.lastName}
onChange={(ev) => this.setState({ lastName: ev.target.value })}
/>
</div>
I have some input fields on the screen.When the page loads first time , I am displaying readonly values from the redux store.On click of edit button , I want fields to become editable with the existing values.( i have state which corresponds to each field of the form).DefaultValue is from redux store .but onClick of save of new fields , I am only getting vlaues for fields which I have modified ,otherfields coming as blank.Any help pls?
/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/forbid-prop-types */
/* eslint-disable no-nested-ternary */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { eventsActions } from '../../store/actions/index';
class UserAccount extends Component {
//console.log(this.props);
constructor(props) {
console.log('props --- ', props.userData);
super();
this.state = {
username: props.userData.username,
firstName: props.userData.firstName,
lastName: props.userData.lastName,
// profilePic: '',
email: props.userData.email,
addressUnit: props.userData.addressUnit,
addressStreet: props.userData.addressStreet,
addressCity: props.userData.addressCity,
addressZip: props.userData.addressZIP,
addressState: props.userData.addressState,
isEditing: false,
};
this.toggleEdit = this.toggleEdit.bind(this);
}
componentDidMount() {
const { loadUserDetails } = this.props;
loadUserDetails();
}
toggleEdit() {
console.log('toggleEdit is called here ----');
this.setState({ isEditing: !this.state.isEditing });
}
handleChange = (event) => {
console.log('event ---- ', event);
this.setState({ [event.target.name]: event.target.value });
};
updateUser = (e) => {
console.log('updateUser is called ---');
e.preventDefault();
const {
username,
firstName,
lastName,
email,
addressUnit,
addressStreet,
addressCity,
addressZip,
addressState,
} = this.state;
const { editUser } = this.props;
console.log('for updating user --- ', this.state);
editUser(this.state);
};
render() {
const { userData } = this.props;
const {
username,
firstName,
lastName,
email,
addressUnit,
addressStreet,
addressCity,
addressZip,
addressState,
isEditing,
} = this.state;
console.log('userData --- ', userData);
console.log('isEditing ---- ', isEditing);
return (
<div>
{isEditing ? (
<div>
<div>
<label>First Name</label>
<input
type="text"
name="firstName"
// ref={firstName}
value={firstName}
onChange={this.handleChange}
/>
</div>
<div>
<label>Last Name</label>
<input
type="text"
name="lastName"
defaultValue={userData.lastName}
onChange={(ev) => this.setState({ lastName: ev.target.value })}
/>
</div>
<div>
<label>Email</label>
<input
type="text"
name="email"
value={userData.email}
onChange={(ev) => this.setState({ email: ev.target.value })}
/>
</div>
<div>
<label>UserName</label>
<input
type="text"
name="username"
value={userData.username}
onChange={(ev) => this.setState({ username: ev.target.value })}
/>
</div>
<div>
<label>Address Unit</label>
<input
type="text"
name="addressUnit"
value={userData.addressUnit}
onChange={(ev) =>
this.setState({ addressUnit: ev.target.value })
}
/>
</div>
<div>
<label>Address Street</label>
<input
type="text"
name="addressStreet"
value={userData.addressStreet}
onChange={(ev) =>
this.setState({ addressStreet: ev.target.value })
}
/>
</div>
<div>
<label>Address City</label>
<input
type="text"
name="addressCity"
value={userData.addressCity}
onChange={(ev) =>
this.setState({ addressCity: ev.target.value })
}
/>
</div>
<div>
<label>Address State</label>
<input
type="text"
name="addressState"
value={userData.addressState}
onChange={(ev) =>
this.setState({ addressState: ev.target.value })
}
/>
</div>
<div>
<label>Address Zip</label>
<input
type="text"
name="addressZip"
value={userData.addressZIP}
onChange={(ev) =>
this.setState({ addressZip: ev.target.value })
}
/>
</div>
<button type="submit" onClick={this.updateUser}>
Save
</button>
</div>
) : (
<div>
<form>
<div>
<label>First Name:</label>
<label> {userData.firstName}</label>
</div>
<div>
<label>Last Name:</label>
<label> {userData.lastName}</label>
</div>
<div>
<label>Email:</label>
<label> {userData.email}</label>
</div>
<div>
<label>UserName:</label>
<label> {userData.username}</label>
</div>
<div>
<label>Address Unit:</label>
<label> {userData.addressUnit}</label>
</div>
<div>
<label>Address Street:</label>
<label> {userData.addressStreet}</label>
</div>
<div>
<label>Address City:</label>
<label> {userData.addressCity}</label>
</div>
<div>
<label>Address State:</label>
<label> {userData.addressState}</label>
</div>
<div>
<label>Address Zip:</label>
<label> {userData.addressZIP}</label>
</div>
<button type="submit" onClick={this.toggleEdit}>
edit
</button>
</form>
</div>
)}
</div>
);
}
}
const mapStateToProps = (state) => {
console.log('state in UserProfile in mapStatetoProps --- ', state);
return { userData: state.events.user };
};
const mapDispatchToProps = (dispatch) => {
return {
loadUserDetails: (userId) => {
console.log('disptach is called for loadUserDetails --');
dispatch(eventsActions.fetchUserDetails(userId));
},
};
};
UserAccount.propTypes = {
loadUserDetails: PropTypes.func.isRequired,
userData: PropTypes.object.isRequired,
};
export default connect(mapStateToProps, mapDispatchToProps)(UserAccount);