I am working in an mui table and I need to have two icons in one cell . Icons are passed through a parent component to the child createSlice is defining the initial state of my table (status cell > index.js this is the folder named statusCell and the file inside it is named index from where our child component is getting the icon as a prop). It is working fine when I pass one icon but I am having trouble in passing two icons. I have looked for solutions but nothing worked. Any help would be appreciated. here is file index.js

import PropTypes from "prop-types";


import Icon from "@mui/material/Icon";

import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import MDButton from "components/MDButton";

function StatusCell({ icon, color, status }) {
  return (
    <MDBox display="flex" alignItems="center">
      <MDBox mr={1}>
        <MDButton variant="outlined" color={color} size="small" iconOnly circular>
          <Icon sx={{ fontWeight: "bold" }}>{icon}</Icon>
        </MDButton>

      </MDBox>
      <MDBox mr={1}>
        <MDButton variant="outlined" color={color} size="small" iconOnly circular>
          <Icon sx={{ fontWeight: "bold" }}>{icon}</Icon>

        </MDButton>

      </MDBox>
      <MDTypography variant="caption" fontWeight="medium" color="text" sx={{ lineHeight: 0 }}>
        {status}
      </MDTypography>
    </MDBox>
  );
}

StatusCell.propTypes = {
  icon: PropTypes.string.isRequired,
  color: PropTypes.string.isRequired,
  status: PropTypes.string.isRequired,
};

export default StatusCell;

inventorySlice

import { createSlice } from '@reduxjs/toolkit';
import ivana from "assets/images/ivana-squares.jpg";
import team1 from "assets/images/team-1.jpg";
import team2 from "assets/images/team-2.jpg";
import team3 from "assets/images/team-3.jpg";
import team4 from "assets/images/team-4.jpg";
import team5 from "assets/images/team-5.jpg";
import CustomerCell from "layouts/ecommerce/orders/order-list/components/CustomerCell";
import DefaultCell from "layouts/ecommerce/orders/order-list/components/DefaultCell";
import IdCell from "layouts/ecommerce/orders/order-list/components/IdCell";
import StatusCell from "../Warehouse/components/StatusCell";

const inventorySlice = createSlice({
    name: 'shared',
    initialState: {
        dataTableData: {
            columns: [
                { Header: "Name", accessor: "name", Cell: ({ value }) => <IdCell id={value} /> },
                {
                    Header: "size",
                    accessor: "size",
                    Cell: ({ value }) => <DefaultCell value={value} />,
                },
                {
                    Header: "SKU",
                    accessor: "sku",
                    Cell: ({ value }) => {
                        let status;

                        if (value === "paid") {
                            status = <StatusCell icon="done" color="success" status="Paid" />;
                        } else if (value === "refunded") {
                            status = <StatusCell icon="replay" color="dark" status="Refunded" />;
                        } else {
                            status = <StatusCell icon="close" color="error" status="Canceled" />;
                        }

                        return status;
                    },
                },
                {
                    Header: "purchaseTotal",
                    accessor: "purchaseTotal",
                    Cell: ({ value: [name, data] }) => (
                        <CustomerCell image={data.image} color={data.color || "dark"} name={name} />
                    ),
                },
                {
                    Header: "marketPrice",
                    accessor: "marketPrice",
                    Cell: ({ value }) => {
                        const [name, data] = value;

                        return (
                            <DefaultCell
                                value={typeof value === "string" ? value : name}
                                suffix={data.suffix || false}
                            />
                        );
                    },
                },
                { Header: "condition", accessor: "condition", Cell: ({ value }) => <DefaultCell value={value} /> },
                { Header: "location", accessor: "location", Cell: ({ value }) => <DefaultCell value={value} /> },
                {
                    Header: "action", accessor: "action",
                    Cell: ({ value }) => {
                        <>
                            <StatusCell icon="delete" color="error" /> &&
                            <StatusCell icon="edit" color="success" />
                        </>


                    }
                }

            ],

            rows: [
                {
                    name: "#10421",
                    sku: "1 Nov, 10:20 AM",
                    size: "paid",
                    purchaseTotal: ["Orlando Imieto", { image: team2 }],
                    marketPrice: "Nike Sport V2",
                    condition: "$140,20",
                    location: "san antonio",
                    action: "action"
                },

            ],
        },
    },
    reducers: {
    },
    extraReducers: {
    },
});




export const {
} = inventorySlice.actions;

export default inventorySlice.reducer;

I've tried making a variable and save the component in it like this but it is not working :

{Header: "action", accessor: "action",
                        Cell: ({ value }) => {
                            let icons;
                            icons = <StatusCell icon="delete" color="error" /> && 
                               <StatusCell icon="delete" color="error" />
    
                            return icons;
                        }
                    }

It is giving an error in console :

react-dom.development.js:14169 Uncaught Error: Cell(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

CodePudding user response：

Inside the inventorySlice file .. instead of using StatusCell component create a new component for icons and pass two icons in as props

Lets say the component can be like

    <div className="d-flex align-items-center">
  
    <div>
      <Icon sx={{ fontWeight: "bold" }}>{icon}</Icon>
    </div>
  </div>

  <div>
    <div >
      <Icon sx={{ fontWeight: "bold" }}>{icon2}</Icon>
    </div>

</div>

you can call the component in your inventoryslice like

                { Header: "action",
             accessor: "action", Cell: ({ value }) => 
             <ActionButtons
                    icon="done"
                    icon2="close"
                /> },
        ],