title: Clicking a left arrow or a right arrow to switch an element in an array with the element on the left or right React
body: <p>I am new to React and am trying to build an app in which a user can create a card, delete a card, and change the order of the cards array by clicking left or right arrow to switch elements with the element on the left or on the right.
  I am struggling to code this functionaliy. I have the function written to switch the card with that on the left, but this function is not doing anything right now. I also do not get any errors in the console from this function, so I really cannot determine where I am going wrong here.
  Here is the code so far:</p>
  <p>CardList.js will display the form to add a card and display the array of CardItems, passing the functions to switch these items to the left or right ('moveLeft', 'moveRight') as props.</p>
  <pre><code>import React from &quot;react&quot;;
  import CardItem from &quot;./CardItem&quot;;
  import CardForm from &quot;./CardForm&quot;;
  import './Card.css';
  
  class CardList extends React.Component {
    state = {
      cards: JSON.parse(localStorage.getItem(`cards`)) || []
      // when the component mounts, read from localStorage and set/initialize the state
    };
  
    componentDidUpdate(prevProps, prevState) { // persist state changes to longer term storage when it's updated
        localStorage.setItem(
          `cards`,
          JSON.stringify(this.state.cards)
        );
    }
  
    render() {
      const cards = this.getCards();
      const cardNodes = (
        &lt;div style={{ display: 'flex' }}&gt;{cards}&lt;/div&gt;
      );
  
      return (
       &lt;div&gt;
       &lt;CardForm addCard={this.addCard.bind(this)} /&gt; 
       &lt;div className=&quot;container&quot;&gt;
       &lt;div className=&quot;card-collection&quot;&gt;
            {cardNodes} 
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  
    addCard(name) {
      const card = {
        name
      };
      this.setState({
        cards: this.state.cards.concat([card])
      }); // new array references help React stay fast, so concat works better than push here.
    }
    
    
    removeCard(index) {
      this.state.cards.splice(index, 1)
      this.setState({
        cards: this.state.cards.filter(i =&gt; i !== index)
      })
    }
  
    moveLeft(index,card) {
     if (index &gt; 1) {
       this.state.cards.splice(index, 1);
       this.state.cards.splice((index !== 0) ? index - 1 : this.state.cards.length, 0, card)
     }
      return this.state.cards
   }
  
    moveRight(index, card) {
     // ?
    }
  
    getCards() {
      return this.state.cards.map((card) =&gt; {
        return (
          &lt;CardItem
            card={card}
            index={card.index}
            name={card.name}
            removeCard={this.removeCard.bind(this)}
            moveLeft={this.moveLeft.bind(this)}
            moveRight={this.moveRight.bind(this)}
          /&gt;
        );
      });
    }
  }
  export default CardList;
  </code></pre>
  <p>CardItem is taking in those props and ideally handling moving the card left or right in the array once the left or right icon is clicked.</p>
  <pre><code>import React from 'react';
  
  import Card from &quot;react-bootstrap/Card&quot;;
  import Button from &quot;react-bootstrap/Button&quot;;
  
  class CardItem extends React.Component {
   render() {
    return (
    &lt;div&gt;
   &lt;Card style={{ width: '15rem'}}&gt;
    &lt;Card.Header as=&quot;h5&quot;&gt;{this.props.name}&lt;/Card.Header&gt;
    &lt;Card.Body&gt;
      &lt;Button variant=&quot;primary&quot; onClick={this.handleClick.bind(this)}&gt;Remove&lt;/Button&gt;
    &lt;/Card.Body&gt;
    &lt;Card.Footer style={{ display: 'flex' }}&gt;
    &lt;i class=&quot;arrow left icon&quot; onClick={this.leftClick.bind(this)} style={{ color: 'blue'}}&gt;&lt;/i&gt;
    &lt;i class=&quot;arrow right icon&quot; onClick={this.rightClick.bind(this)} style={{ color: 'blue'}}&gt;&lt;/i&gt;
    &lt;/Card.Footer&gt;
  &lt;/Card&gt;
   &lt;/div&gt;
      )
    }
  
  handleClick(index) { 
    this.props.removeCard(index)
  }
  
  leftClick(index, card) {
  this.props.moveLeft(index, card)
  }
  
  rightClick(index, card) {
    this.props.moveRight(index, card)
  }
  
  }
  export default CardItem;
  </code></pre>
  <p>Not sure where I am going wrong here. Any help would be appreciated</p>
  <p><strong>Edit #1</strong>
  Hey guys, so I wrote out a different function to handle moving the card to the left, and I decided to bind &quot;this&quot; to that method in the constructor because I was getting errors saying the program could not read it. However, I am still getting errors basically saying that everything is not defined when I pass the function from CardList to CardItem as props. Does anybody know what the problem is? I suspect its my syntax when I call the methods in CardItem.</p>
  <p><code>CardList.js</code></p>
  <pre><code>import React from &quot;react&quot;;
  import CardItem from &quot;./CardItem&quot;;
  import CardForm from &quot;./CardForm&quot;;
  import './Card.css';
  
  class CardList extends React.Component {
    constructor(props) {
      super();
  
      this.moveLeft = this.moveLeft.bind(this);
      this.moveRight = this.moveRight.bind(this);
      this.state = {
        cards: JSON.parse(localStorage.getItem(`cards`)) || []
        // when the component mounts, read from localStorage and set/initialize the state
      };
    }
    
    
  
    componentDidUpdate(prevProps, prevState) { // persist state changes to longer term storage when it's updated
        localStorage.setItem(
          `cards`,
          JSON.stringify(this.state.cards)
        );
    }
  
    render() {
      const cards = this.getCards();
      const cardNodes = (
        &lt;div style={{ display: 'flex' }}&gt;{cards}&lt;/div&gt;
      );
  
      return (
       &lt;div&gt;
       &lt;CardForm addCard={this.addCard.bind(this)} /&gt; 
       &lt;div className=&quot;container&quot;&gt;
       &lt;div className=&quot;card-collection&quot;&gt;
            {cardNodes} 
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  
    addCard(name) {
      const card = {
        name
      };
      this.setState({
        cards: this.state.cards.concat([card])
      }); // new array references help React stay fast, so concat works better than push here.
    }
    
    
    removeCard(index) {
      this.state.cards.splice(index, 1)
      this.setState({
        cards: this.state.cards.filter(i =&gt; i !== index)
      })
    }
  
    moveLeft(index, card) {
      this.setState((prevState, prevProps) =&gt; {
          return {cards: prevState.cards.map(( c, i)=&gt; {
              // also handle case when index == 0
              if (i === index) {
                  return prevState.cards[index - 1];
              } else if (i === index - 1) {
                  return prevState.cards[index];
              }    
          })};
      }); 
   }
  
    moveRight(index, card) {
     // ?
    }
  
    getCards() {
      return this.state.cards.map((card) =&gt; {
        return (
          &lt;CardItem
            card={card}
            index={card.index}
            name={card.name}
            removeCard={this.removeCard.bind(this)}
            moveLeft={this.moveLeft}
            moveRight={this.moveRight}
          /&gt;
        );
      });
    }
  }
  export default CardList;
  
  </code></pre>
  <p><code>CardItem.js</code></p>
  <pre><code>import React from 'react';
  
  import Card from &quot;react-bootstrap/Card&quot;;
  import Button from &quot;react-bootstrap/Button&quot;;
  
  class CardItem extends React.Component {
   render() {
    return (
    &lt;div&gt;
   &lt;Card style={{ width: '15rem'}}&gt;
    &lt;Card.Header as=&quot;h5&quot;&gt;{this.props.name}&lt;/Card.Header&gt;
    &lt;Card.Body&gt;
      &lt;Button variant=&quot;primary&quot; onClick={this.handleClick.bind(this)}&gt;Remove&lt;/Button&gt;
    &lt;/Card.Body&gt;
    &lt;Card.Footer style={{ display: 'flex' }}&gt;
    &lt;i class=&quot;arrow left icon&quot; onClick={leftClick(index, card)} style={{ color: 'blue'}}&gt;&lt;/i&gt;
    &lt;i class=&quot;arrow right icon&quot; onClick={rightClick(index, card)} style={{ color: 'blue'}}&gt;&lt;/i&gt;
    &lt;/Card.Footer&gt;
  &lt;/Card&gt;
   &lt;/div&gt;
      )
    }
  
  handleClick(index) { 
    this.props.removeCard(index)
  }
  
  leftClick(index, card) {
  this.props.moveLeft(index,card)
  }
  
  rightClick(index, card) {
    this.props.moveRight(index, card)
  }
  
  }
  export default CardItem;
  </code></pre>