CODEWITHSUNDEEP
javascriptreactjs
typingoverworld
typingoverworld

Reputation: 69

React - How to Push an Object to an Array Nested within an Array

I am currently learning React, so I apologize if I am not using the correct terminology.

I am creating a project which has multiple columns and each column has an "add" button. This button pops open a modal, where the user can input a string of text. I then wish to return this string of text and display it within a specific column. I've run into trouble trying to determine how to update the setState, depending on the index of the column I wish to reference.

I am returning the column ID from the modal, then comparing that column ID with the IDs of the columns set in the state. I'd like to know how to take the columns[index] I've acquired and use that to update the cards array with the card object in the addCard method.

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

    this.state = {
      modalOpen: false,
      columns: [
        {
          title: '',
          id: uuid(),
          cards: []
        },
        {
          title: '',
          id: uuid(),
          cards: []
        },
        {
          title: '',
          id: uuid(),
          cards: []
        }
      ],
      currentColumnID: null
    };
  }
  openModal = (colID) => {
    this.setState(state => {
      return {
        modalOpen: true,
        currentColumnID: colID
      };
    });
  };
  closeModal = () => {
    this.setState(state => {
      return {
        modalOpen: false
      };
    });
  };
  addCard = (cardValue) => {
    const card = {
      value: cardValue,
      id: uuid()
    };
    // compare column IDs to currentColumnID
    // return the index of whichever column is "true"
    const index = this.state.columns.map((column, i) => {     
      if(column.id === this.state.currentColumnID) {
        return i;
      }
    });

    // add card to returned column

    this.setState(state => {
      return {
        modalOpen: false
      };
    });
  };

Upvotes: 1

Views: 344

Answers (2)

Ken Labso
Ken Labso

Reputation: 911

You can directly manage this in the setState.

addCard = cardValue => {
    const card = {
      value: cardValue,
      id: uuid()
    };
    this.setState(prevState => ({
      columns: prevState.columns.map(column => ({
        ...column,
        cards: column.id === prevState.currentColumnID ? [...column.cards, card] : column.cards
      })),
      modalOpen: false
    }))
  };

Upvotes: 0

Hoyen
Hoyen

Reputation: 2519

In your addCard method. Find the column and then push the card into the array.

addCard = (cardValue) => {
  const card = {
      value: cardValue,
      id: uuid()
  };

  // Find the column
  const column = this.state.columns.find(column => {
      return column.id === this.state.currentColumnID;
  })

  // add card to returned column
  if (column != null) {
      column.cards.push(card);
  }

  this.setState(state => {
      return {
          modalOpen: false
      };
  });
};

Upvotes: 2

Related Questions