Using a function as a value to change the state in ReactJS

Question

I am trying to add functionality to the buttons on my app's list so that when UP is clicked the list item swaps with the item directly on top of it.

I tried using a function as a value of my state in setState. But when I click the button this error occurred :

TypeError: Cannot read property 'map' of undefined
App.render
src/App.js:49
  46 | return( 
  47 |   <div>
  48 |     <h1>UNUM Challenge</h1>
> 49 |     <ol>
     | ^  50 |       {this.state.shoppingList.map((item, index) =>
  51 |          (<li data-index = {index} key={index}>
  52 |             {item}

What is happening here? Can't I use a function as the value when setting my state like this?

this.setState({
        shoppingList: arraymove(shoppingList, currentIndex , currentIndex - 1) 
})

Here is the full code:

import React, { Component } from 'react';    

function arraymove(arr, fromIndex, toIndex) {
        var element = arr[fromIndex];
        arr.splice(fromIndex, 1);
        arr.splice(toIndex, 0, element);
    }

    class App extends React.Component {
        constructor(props){
        super(props);

        this._handleItemSort = this._handleItemSort.bind(this);

        this.state = {
            shoppingList: ['Bananas', 'Apples', 'Rice', 'Eggs' , 'GTX 1080Ti', 'Avocado']
        }
      }



      _handleItemSort(dir, currentIndex) {
        // create new list of items from a spread of our current shoppingList state.
        // we don't want to reference the actual state and mutate it! 😱
        const shoppingList = [...this.state.shoppingList]

        if (dir === "up" ){
          this.setState({
            shoppingList: arraymove(shoppingList, currentIndex , currentIndex - 1) 
          }) 
        }

      }

      render() {
        return( 
          <div>
            <h1>UNUM Challenge</h1>
            <ol>
              {this.state.shoppingList.map((item, index) =>
                    (<li data-index = {index} key={index}>
                    {item}
                    <div className='controls'>
                      <button 
                        disabled={index === 0} 
                        onClick={ () => this._handleItemSort("up", index) }>UP</button>
                      <button
                        disabled={this.state.shoppingList.length === index + 1}
                        onClick={ () => this._handleItemSort("down", index) } >DOWN</button>
                    </div>
                  </li>)
                )}
            </ol>
          </div>
        );
      }
    }

arraymove doesn't return anything add a return to the end of your function arraymove with return arr — Fabio Antunes
– Fabio Antunes, Commented Oct 26, 2018 at 14:40
Your arraymove function doesn't return anything - so this.setState({shoppingList: arraymove(shoppingList, currentIndex , currentIndex - 1) }) is equivalent to this.setState({shoppingList: undefined}). Which I'm sure is not what you want. — Robin Zigmond
– Robin Zigmond, Commented Oct 26, 2018 at 14:40
Thank you for your comment, I tried adding return like this: return arr.splice(toIndex, 0, element); but the error is still there — bradrar
– bradrar, Commented Oct 26, 2018 at 14:43

AkshayM · Accepted Answer · 2018-10-26 14:45:17Z

2

Returning arr.splice() will give you an array containing the deleted elements. If only one element is removed, an array of one element is returned. If no elements are removed, an empty array is returned.

You need to return modified array like this:

function arraymove(arr, fromIndex, toIndex) {
  var element = arr[fromIndex];
  arr.splice(fromIndex, 1);
  arr.splice(toIndex, 0, element);
  return arr;
}

answered Oct 26, 2018 at 14:45

AkshayM

1,44110 silver badges21 bronze badges

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

1 Comment

bradrar Over a year ago

Thank you! So stupid of me of not using a modified array. I will mark your answer in 5 minutes

Cyril Gandon · Accepted Answer · 2018-10-26 14:45:51Z

1

arraymove doesn't returns, it mutates the state of the list, and return undefined.

So the call

shoppingList: arraymove(shoppingList, currentIndex , currentIndex - 1)

is equivalent to

shoppingList: undefined

So the fix is minimal:

const shoppingList = [...this.state.shoppingList];
arraymove(shoppingList , currentIndex , currentIndex - 1) 
this.setState({
    shoppingList: shoppingList 
})

edited Oct 26, 2018 at 14:45

answered Oct 26, 2018 at 14:43

Cyril Gandon

17.1k15 gold badges84 silver badges124 bronze badges

2 Comments

bradrar Over a year ago

Thank you for pointing it out. So I tried this: ` function arraymove(arr, fromIndex, toIndex) { var element = arr[fromIndex]; arr.splice(fromIndex, 1); return arr.splice(toIndex, 0, element); } ` and the error is the same

Cyril Gandon Over a year ago

You can keep mutates the array in place, just try the updated example!

Collectives™ on Stack Overflow

Using a function as a value to change the state in ReactJS

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related