CODEWITHSUNDEEP
reactjsredux
Cauã
Cauã

Reputation: 21

How can I change the color changing the state from redux?

I'm trying to change a specific icon color in a map when I click on it, but the color doesn't change, I already did a little project that changes the color when I click on it, but the difference between them is: In this project I used useState, and here I'm using the Redux State and I don't know how can I do this.

function handleRetweetColor(id) {
  console.log("ID: " + id);
  props.post.postReducer.map(post => {
   if(post.id === id) {
     console.log(post)
     return { ...post, retweet: true }
   }
   return post;
  })
}

return (
    <div className="posts-container">
      {props.post.postReducer.map(post => {
      return (
        {console.log(post)} <------ value in the image
        <div className="post" key={post.id}>
          <div className="bottom-content">
            <div onClick={() => handleRetweetColor(post.id)} >
              <FaRetweet size={20} style={{ color: post.retweet ? "#35e95f" : "#ccc" }} />
            </div>
          </div>
        </div>
      )
    })}
  </div>
)

Object that returns in the log above

Upvotes: 1

Views: 490

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196276

Your handleRetweetColor function does not return anything. But even if it did, you do nothing with it. You just call it on click.

If you want to update the redux store, you would need to call an action and pass the id with it, and in your reducer you would change the redux store to set the retweet to true.

Upvotes: 1

Related Questions