Updating an array in SharePoint spfx using React & PnPJS - arrays

Question

I'm creating a web app that allows the user to update their status and location.
I have a data list table on SharePoint with the user's name, email address, status (for example: online, offline, or busy), location (which is a select field), along with other fields.
The web app is just 2 different select fields. Which allows the user to update his status and location.
When the user accesses the page on componentDidMount() I'm getting the user's email addresses (since he's logged into SharePoint) and then filtering the data list array to view the element for his information (so looking for his email address in the MyList. The part I'm stuck at now is updating the MyList list with the selected response that the user selected.
Using PnP-JS i found this should be possible here are two links showing the update() function.
https://github.com/SharePoint/PnP-JS-Core/wiki/Basic--Operations
https://github.com/SharePoint/PnP-JS-Core/wiki/Working-With:-Items
My code found here:
export default class SigninLocationWebpart extends React.Component<ISigninLocationWebpartProps, {Status: string, Location: string, userName: string, getEmail: string, selectedUser: any}> {
constructor(props) {
super(props);
this.state = {
Status: 'Online',
Location: 'New York',
userName: '',
getEmail: '',
selectedUser: {},
};
this.handleChangeStatus = this.handleChangeStatus.bind(this);
this.handleChangeLocation = this.handleChangeLocation.bind(this);
}
handleChangeStatus(event) {
const { value } = event.target;
this.setState({ Status: value });
}
handleChangeLocation(event) {
const { value } = event.target;
this.setState({ Location: value });
}
private _onUpdate(event) {
event.preventDefault();
//This is where I need help on updating list
let list = pnp.sp.web.lists.getByTitle("MyList")
//Instead of getting by ID i need to get by that selectUser array I believe
list.items.getById(1).update({
Status: this.state.Status, //User changing from Online to Offline
Location: this.state.Location //User changing from New York to Los Angeles
}).then(i => {
console.log(i);
});
}
public componentDidMount() {
if (Environment.type === EnvironmentType.Local) {
}
else if (Environment.type === EnvironmentType.SharePoint || Environment.type === EnvironmentType.ClassicSharePoint) {
//This gets the current users info and sets it to username and email
sp.web.currentUser.get().then((response : CurrentUser) => {
//console.log(response);
this.setState({
userName: response["Title"],
getEmail: response["Email"],
})
})
//This gets the list of all all items in the list
pnp.sp.web.lists.getByTitle("MyList").items.get().then((items: any[]) => {
console.log(items);
//Comparing email from sign in user and filtering items array to get that element
var compareEmail = this.state.getEmail;
console.log(compareEmail);
let selectedUser = _.filter(items, function(item) {
return item.Email_x0020_Address.toLowerCase() === compareEmail.toLowerCase();
});
console.log(selectedUser);
});
}
}
public render(): React.ReactElement<ISigninLocationWebpartProps> {
return (
<div className={ styles.signinLocationWebpart }>
<h3>Hello {this.state.userName}</h3>
<form onSubmit={this._onUpdate}>
<label>
Check In our Out
</label>
<select name="Status" value={this.state.Status} onChange={this.handleChangeStatus}>
<option value="Online">Online</option>
<option value="Offline">Offline</option>
<option value="Busy">Busy</option>
</select>
<label>
Location
</label>
<select name="Location" value={this.state.Location} onChange={this.handleChangeLocation}>
<option value="New York">New York</option>
<option value="Michigan">Michigan</option>
<option value="Los Angeles">Los Angeles</option>
</select>
<input type="submit" value="Submit" />
</form>
</div>
);
}
}

Answer 1

First of all, instead of getting all items in the List, and then filtering for the current user, you should get only the item(s) for the current user to begin with. Once you list gets large, you would be performing a lot of overhead by retrieving all items.
Secondly, and what you allude to in your comments, is that you need to specify the ID of the item to update. So, in your componentDidMount, after you get the List Item for the current user, save that Item in your state.
public componentDidMount() {
if (Environment.type === EnvironmentType.Local) {
}
else if (Environment.type === EnvironmentType.SharePoint || Environment.type === EnvironmentType.ClassicSharePoint) {
//This gets the current users info and sets it to username and email
sp.web.currentUser.get().then((response : CurrentUser) => {
//console.log(response);
this.setState({
userName: response["Title"],
getEmail: response["Email"],
});
pnp.sp.web.lists.getByTitle("MyList").items.filter("Email_x0020_Address eq '" + this.state.getEmail + "'").top(1).get().then((items: any[]) => {
if (items && items.length) {
this.setState( { selectedUser: items[0] } );
}
});
})
}
}
Then at update time, you can use the ID of that item to save it.
private _onUpdate(event) {
event.preventDefault();
//This is where I need help on updating list
let list = pnp.sp.web.lists.getByTitle("MyList")
//Instead of getting by ID i need to get by that selectUser array I believe
list.items.getById(this.state.selectedUser.ID).update({
Status: this.state.Status, //User changing from Online to Offline
Location: this.state.Location //User changing from New York to Los Angeles
}).then(i => {
console.log(i);
});
}
Additionally, you'll want to make sure you are binding your submission handler just like you are doing for your onchange handlers in your constructor:
this._onUpdate = this._onUpdate.bind(this);
I will also add, that unless you've make sure to pre-populate the List with all possible users, and will always keep it updated with new users, it would be best in to put a check in your _onUpdate that if this.state.selectedUser == null || this.state.selectedUser.ID == null then you should create a new item (and add the new item to your this.state.selectedUser), instead of updating.