React Redux deleting item from array at specific index

Question

I'm trying to delete an item in an array by accessing the id of the object within the array which I'm mapping to individual components.

I'm pretty sure that my reducer is properly configured, but I'm having trouble passing the id of the object to the action. When I console.log the action payload I get Class {dispatchConfig: {…}, _targetInst: FiberNode, _dispatchListeners: ƒ, _dispatchInstances: FiberNode, nativeEvent: MouseEvent, …}.

Here is the code

action:

  console.log(id)
  return {
    type: DELETE_QUOTE,
    payload: id
  }
}

reducer:

        return {
          ...state,
          generatedQuotes: state.generatedQuotes.filter(quote=>quote.id !== action.payload.id)
        }

container component:

{this.props.generatedQuotes.map((item, i) => 
                <div className="column is-half" key={i}>
                <QuoteCard
                  author={item.name} 
                  quote={item.quote} 
                  email={item.email} 
                  date={item.date}
                  id={item.id}
                  deleteQuote={this.props.deleteQuote}
                />
                </div>
          )}

mapDispatchToProps in container component:

const mapDispatchToProps = dispatch => {
  return {
    generateQuote: () => dispatch(generateQuote()),
    deleteQuote: id => dispatch(deleteQuote(id))
  };
}

presentational component:

const QuoteCard = ({author, email, date, quote, id, deleteQuote}) => {
  return (
    <div className="box" key={date}>
      <article className="media">
        <div className="media-left">
          <figure className="image is-128x128">
            <img src="https://bulma.io/images/placeholders/128x128.png" alt="Mock" />
          </figure>
        </div>
        <div className="media-content">
          <div className="content">
            <p>
              <strong>{author}</strong>
              <small>{email}</small>
              <br />
              <small><em>{date}</em></small>
              <br />
              {quote}
            </p>
          </div>
        </div>
      </article>
      <br />
      <div className="buttons">
        <button className="button is-success is-small" onClick={() => window.open(`https://twitter.com/intent/tweet?text="${quote}" Quote by: ${author}`)}>Tweet Quote</button>
        <button className="button is-danger is-small" onClick={(id) => deleteQuote(id)}>Delete Quote</button>
      </div>
    </div>
  );
};

Change onClick={(id) => deleteQuote(id)} to onClick={() => deleteQuote(id)}. Otherwise you'll use the event object as parameter to deleteQuote — Harald Gliebe
– Harald Gliebe, Commented Apr 30, 2019 at 1:30

Mayank Shukla · Accepted Answer · 2019-04-30 02:06:21Z

3

Your id is action.payload, so

return {
  ...state,
  generatedQuotes: state.generatedQuotes.filter(quote=> quote.id !== action.payload)
};

edited Apr 30, 2019 at 2:06

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

answered Apr 30, 2019 at 1:27

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

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

Collectives™ on Stack Overflow

React Redux deleting item from array at specific index

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