Edit function not saving changes to state data in React

user_10420740 0
Viewed 793

I am trying to provide functionality in my webpage for editing state data.

Here is the state structure

state = {
  eventList:[
    {
       name: "Coachella"
       list: [
          {
             id: 1,
             name: "Eminem"
             type: "rap"
          }
          {
             id: 2,
             name: "Kendrick Lamar"
             type: "rap"
          }
       ]
    }
  ]
}

I want to be able to edit the list arrays specifically the id, name, and type properties but my function doesn't seem to edit them? I currently pass data I want to override id name and type with in variable eventData and an id value specifying which row is selected in the table which outputs the state data.

Here is the function code:

editPickEvent = (eventData, id) => {
     const eventListNew = this.state.eventList;
     eventListNew.map((event) => {
       event.list.map((single) => {
         if (single.id == id) {
           single = eventData;
         }
       });
     });
     this.setState({
       eventList: eventListNew,
     });
   };

When I run the code the function doesn't alter the single map variable and I can't seem to pinpoint the reason why. Any help would be great

edit:

Implementing Captain Mhmdrz_A's solution

editPickEvent = (eventData, id) => {
 const eventListNew = this.state.eventList.map((event) => {
   event.list.map((single) => {
     if (single.id == id) {
       single = eventData;
     }
   });
 });
 this.setState({
   eventList: eventListNew,
 });

};

I get a new error saying Cannot read property list of undefined in another file that uses the map function to render the state data to the table?

This is the part of the other file causing the error: 

render() {
const EventsList = this.props.eventList.map((event) => {
  return event.list.map((single) => {
    return (
reactjs state edit javascript
3 Answers

map() return a new array every time, but you are not assigning it to anything; 

editPickEvent = (eventData, id) => {
     const eventListNew = this.state.eventList.map((event) => {
       event.list.forEach((single) => {
         if (single.id == id) {
           single = eventData;
         }
       });
       return event
     });
     this.setState({
       eventList: eventListNew,
     });
   };
user_59536100 
const editPickEvent = (eventData, id) => {
   const updatedEventList = this.state.eventList.map(event => {
        const updatedList = event.list.map(single => {
            if (single.id === id) {
                return eventData;
            }
            return single;
        });
        return {...event, list: updatedList};
    });
    this.setState({
       eventList: updatedEventList,
    });
}

Example Link: https://codesandbox.io/s/crazy-lake-2q6ez

Note: You may need to add more checks in between for handling cases when values could be null or undefined. Also, it would be good if you can add something similar to the original data source or an example link.

user_76726240

Turns out primitive values are pass by value in javascript, which I didn't know and why the assignment wasn't working in some of the previous suggested answers. Here is the code that got it working for me:

 editEvent = (EventData, id) => {
     const eventListNew = this.state.eventList.map((event) => {
       const newList = event.list.map((single) => {
         return single.id == id ? EventData : single;
       });
       return { ...event, list: newList };
     });
     this.setState({
       eventList: eventListNew,
     });
   };
user_104207400
Related