react issue - Cannot assign to read only property '0' of object '[object Array]' ---

Question

What causes the ff issue ? Cannot assign to read only property '0' of object '[object Array]' ?

Any idea would be appreacited. Thanks.

#ts code snippet

 const [RegionalList, setRegionalList] = useState<IRegionalList[]>(RegionalListData);


 const setEmailValue = (event: any, regionalId: number, index: number) => {
    setRegionalList((prevState: IRegionalList[]) => {
      const newState = prevState.map((prop: IRegionalList) => {
        if (prop.id === regionalId) {
          prop.emails[index] = { emailAddress: event.target.value, id: null };
          return { ...prop };
        }
        return prop;
      });
      return newState;
    });
  }

prop.emails[index] = { .... } You are mutating the state here — adiga
– adiga, Commented Nov 10, 2022 at 13:25
if may I ask here about do avoid that ? and how do I fix t hat with my existing code above — Tim Launders
– Tim Launders, Commented Nov 10, 2022 at 13:28
@adiga is right , and I think this will do what you want : return { ...prop,emails:[...prop.emails.filter( (_,i)=>i !== index ),{ emailAddress: event.target.value, id: null }] } — Ali Sattarzadeh
– Ali Sattarzadeh, Commented Nov 10, 2022 at 13:36

Ali Sattarzadeh · Accepted Answer · 2022-11-10 13:44:25Z

1

here is the way that I suggest :

 const [RegionalList, setRegionalList] = useState<IRegionalList[]>(RegionalListData);


 const setEmailValue = (event: any, regionalId: number, index: number) => {
    setRegionalList((prevState: IRegionalList[]) => {
      const newState = prevState.map((prop: IRegionalList) => {
        if (prop.id === regionalId) {
         return { ...prop,emails:[...prop.emails.filter( (_,i)=>i !== index ),{ emailAddress: event.target.value, id: null }] } 
        }
        return prop;
      });
      return newState;
    });
  }

and if you care about order of your list you can do this :

    const setEmailValue = (event: any, regionalId: number, index: number) => {
    setRegionalList((prevState: IRegionalList[]) => {
      const newState = prevState.map((prop: IRegionalList) => {
        if (prop.id === regionalId) {
         let emails = prop.emails;
         emails[index] = { emailAddress: event.target.value, id: null };
          return { ...prop,emails }
        }
        return prop;
      });
      return newState;
    });
  }

please let me know if it fixed your problem

answered Nov 10, 2022 at 13:44

Ali Sattarzadeh

3,6272 gold badges9 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tim Launders Over a year ago

Hi Sir , just a question, what makes my existing code wrong ? and why is that it is not allowed to do that mutation ? Thanks.

Ali Sattarzadeh Over a year ago

Hi, I think this is because you cannot change value of state directly and prop.emails is value of state so you cannot use '=' to change its value what I did in second solution was just returning new value for emails and setRegionalList will set it per se if its not clear I can explain more

Collectives™ on Stack Overflow

react issue - Cannot assign to read only property '0' of object '[object Array]' ---

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related