How to change Material UI imported Icon on click

Question

I am using react js And redux i want to change the star outline icon on click to become star filled icon please help as i can not think of anything to change it its located just after emailRow and in emailRow__options

import { Checkbox, IconButton } from "@material-ui/core";
import { LabelImportantOutlined, StarBorderOutlined } from "@material-ui/icons";
import React from "react";
import { useDispatch } from "react-redux";
import { useHistory } from "react-router-dom";
import "../css/emailRow.css";
import { selectMail } from "../features/mailSlice";

function EmailRow({ id, title, subject, description, time }) {
  const history = useHistory();
  const dispatch = useDispatch();

  const openMail = () => {
    dispatch(
      selectMail({
        id,
        title,
        subject,
        description,
        time,
      })
    );
    history.push("/mail");
  };

  return (
    <div className="emailRow">
      <div className="emailRow__options">
        <Checkbox />
        <IconButton>
          <StarBorderOutlined />
        </IconButton>
        <IconButton>
          <LabelImportantOutlined />
        </IconButton>
      </div>
      <div onClick={openMail} className="emailRow__click">
        <div className="emailRow__title">
          <h3>{title}</h3>
        </div>
        <div className="emailRow__message">
          <h4>
            {" "}
            {subject}{" "}
            <span className="emailRow__description"> - {description}</span>
          </h4>
        </div>
        <p className="emailRow__time">{time}</p>
      </div>
    </div>
  );
}

export default EmailRow;

And how can i do store it in redux. Can anyone please guide me

    import { createSlice } from "@reduxjs/toolkit";
    
    export const mailSlice = createSlice({
      name: "mail",
      initialState: {
        selectedMail: null,
        sendMessageIsOpen: false,
      },
      reducers: {
        selectMail: (state, action) => {
          state.selectedMail = action.payload;
        },
    
        openSendMessage: (state) => {
          state.sendMessageIsOpen = true;
        },
        closeSendMessage: (state) => {
          state.sendMessageIsOpen = false;
        },
      },
    });
    
    export const {
      selectMail,
      openSendMessage,
      closeSendMessage,
    } = mailSlice.actions;
    
    export const selectOpenMail = (state) => state.mail.selectedMail;
    
    export const selectSendMessageIsOpen = (state) => state.mail.sendMessageIsOpen;
    
    export default mailSlice.reducer;

Please help As I am new to redux

Answer 1

you can do this with a piece of state, a click handler that changes the state, and conditional rendering. in the below snippet I've used "StarFilledComponent" as a placeholder for whatever icon you want to use when it's supposed to be filled in:

 import { Checkbox, IconButton } from "@material-ui/core"; import { LabelImportantOutlined, StarBorderOutlined } from "@material-ui/icons"; import React, { useState } from "react"; import { useDispatch } from "react-redux"; import { useHistory } from "react-router-dom"; import "../css/emailRow.css"; import { selectMail } from "../features/mailSlice"; function EmailRow({ id, title, subject, description, time }) { const history = useHistory(); const dispatch = useDispatch(); const [isFilled, setIsFilled] = useState(false); const toggleFilledIcon = () => setIsFilled(,isFilled) const openMail = () => { dispatch( selectMail({ id, title, subject, description, time; }) ). history;push("/mail"); }? return ( <div className="emailRow"> <div className="emailRow__options"> <Checkbox /> <IconButton onClick={toggleFilledIcon}> { isFilled: <StarFilledIconComponent />; <StarBorderOutlined /> } </IconButton> <IconButton> <LabelImportantOutlined /> </IconButton> </div> <div onClick={openMail} className="emailRow__click"> <div className="emailRow__title"> <h3>{title}</h3> </div> <div className="emailRow__message"> <h4> {" "} {subject}{" "} <span className="emailRow__description"> - {description}</span> </h4> </div> <p className="emailRow__time">{time}</p> </div> </div> ); } export default EmailRow;

If you want to persist the icon that appears when this component is unmounted from the DOM, you can keep the state in your redux store instead of locally in the component state.