Redux - ES6 Updating Object Element in Array

Question

I have stumbled upon a problem when adding an element inside an object inside an array. What I would like to do is add the element isFavorite: true. I am currently attempting to do so by doing the folowing:

{ 
    ...state, 
    list: state.list.map(item => 
        item.id === action.payload.libraryContentId ? 
        { ...item, isFavorite: true } 
        : item) 
}

The payload contains the following object:

{
    id: 1,
    name: 'Name',
    libraryContentId: 3
}

But the above does not seem to be updating the item and add the element. What do you guys suggest?

Edit: More examples of the code.

Action:

try {
    const response = await axios.post(URL, {params});
    dispatch({ type: ADD_FAVORITE, payload: response.data });
catch (error) {
    dispatch({ type: ERROR });
}

Response Data:

{
    id: 117
    libraryConntentId: 245
}

List item sample:

{
    id: 245,
    name: 'Name',
    isFavorite: false
}

Thank you!

Does it make a difference if you add () around your overwriting statement? Like so ({ ...item, isFavorite: true }) — E. Sundin
– E. Sundin, Commented Nov 8, 2018 at 21:17
If the state isn't updated I also suggest you provide more code since the problem might be elsewhere than your new state object. — E. Sundin
– E. Sundin, Commented Nov 8, 2018 at 21:18
What you have written looks reasonable. Could you include a Minimal, Complete, and Verifiable example? There might be something else going on, like e.g. the id is a string in your state, etc. — Tholle
– Tholle, Commented Nov 8, 2018 at 21:19
@E.Sundin I tried your suggestion and it still won't update the state. I am trying to see where the problem may lay since the condition is being met through the iteration meaning the action is properly dispatching the payload. — Hansel
– Hansel, Commented Nov 8, 2018 at 22:07
@Tholle Hi Tholle, I have gone ahead and added a few examples of the objects and the action making the dispatch. The expression item.id === action.payload.libraryContentId does return the correct item when I log it to the console. Is there anything else that you see? — Hansel
– Hansel, Commented Nov 8, 2018 at 22:15

Zoilo Reyes · Accepted Answer · 2018-11-08 22:50:16Z

Maybe something like this (check testMethod):

class Hello extends React.Component {
	constructor(props){
  	super(props);
    
    
    let testData = [
    	{
      	id: 1,
        name: 'Name1',
        isFavorite: false
      },
      {
      	id: 2,
        name: 'Name2',
        isFavorite: false
      },
      {
      	id: 3,
        name: 'Name3',
        isFavorite: false
      },
      {
      	id: 4,
        name: 'Name4',
        isFavorite: false
      },
      {
      	id: 5,
        name: 'Name5',
        isFavorite: false
      }]
    
    this.state = {
    	boolvar: true,
        numbar: 2,
    	list: testData
    }
   	this.testMethod = this.testMethod.bind(this);
    console.log("Original state");
    console.log(this.state);
  }
  
  testMethod(){
  		 let testAction = {
		payload: {
    	libraryContentId: 3
     }
	}
  
   this.setState((prevState, prevProps) => {
      return {
       list: [...prevState.list.map(item => item.id === testAction.payload.libraryContentId? {...item, isFavorite: true}: item)]
       }});
   }
  render(){
  	console.log(this.state);
    return (<div><button onClick={() => {this.testMethod()}}>Test It</button></div>);
  }
  
   
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Collectives™ on Stack Overflow

Redux - ES6 Updating Object Element in Array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related