Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

If Statement Inside Map

I currently have a DataGrid that is rendering data grabbed from my backend mongoDB. The data rendering is mapped to keys specified by the objects in the mongoDB document. In each document is a set of boolean values, and I am trying to check if any of those are true, if they are true it will render a Y in the repairsNeeded column for each row, if not, it will render an N. The main problem I am running into is where/how to check this. I have played with a few different ideas to no avail. Right now I have the repairsNeeded column for each row assigned to the document.isPowerCordDamaged (one of my booleans), which renders true or false depending on if its checked.

Code:

function Rounding() {
  const [cartsRounded, setCartsRounded] = useState([]);

  let navigate = useNavigate();

  useEffect(() => {
    userCartsRounded()
      .then((response) => {
        setCartsRounded(response.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  const columns = [
    {
      field: "serialNum",
      headerName: "Cart Serial Number",
      width: 250,
    },
    {
      field: "pcNum",
      headerName: "Workstation Number",
      width: 250,
    },
    {
      field: "dateLastRounded",
      headerName: "Last Rounded On",
      width: 250,
    },
    {
      field: "repairsNeeded",
      headerName: "Repairs?",
      width: 100,
    },
    {
      field: "quarter",
      headerName: "Quarter",
      width: 75,
    },
  ];

  const [sortModel, setSortModel] = React.useState([
    {
      field: "dateLastRounded",
      sort: "desc",
    },
  ]);

  const rows = useMemo(
    () =>
      cartsRounded.map((row, index) => ({
        ...row,
        id: index,
        serialNum: row.cartSerialNumber,
        pcNum: row.pcNumber,
        dateLastRounded: moment(row.updatedAt).format("MM-D-YYYY"),
        repairsNeeded: row.isPowerCordDamaged,
        quarter: moment(row.updatedAt).format("Qo"),
      })),
    [cartsRounded]
  );

  return (
    <div>
      <IconButton
        color="primary"
        aria-label="new rounding"
        component="span"
        onClick={() => {
          navigate("add_new_cart");
        }}
      >
        <AddCircleOutline />
      </IconButton>
      <div style={{ height: 400, width: "100%" }}>
        <DataGrid
          component={Paper}
          rows={rows}
          columns={columns}
          sortModel={sortModel}
          pageSize={100}
          rowsPerPageOptions={[100]}
        />
      </div>
    </div>
  );
}

export default Rounding;

Document Example:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

  {
    _id: new ObjectId("61b95e447aec51d938e856cc"),
    cartSerialNumber: 'testytitit',
    pcNumber: '14124f0sdf0sfs',
    isPowerCordDamaged: false,
    isFuseBlown: false,
    isInverterBad: false,
    isInterfaceDamaged: false,
    isPhysicalDamage: false,
    otherNotes: '',
    roundedBy: '6186c13beb18d33d5088f7b2',
    createdAt: 2021-12-15T03:17:24.495Z,
    updatedAt: 2021-12-15T03:17:24.495Z,
    __v: 0
  }

>Solution :

I may not be understanding the question here. But I think what you are trying to do is have the repairsNeeded field have a Y or N rather than its boolean value.

Try this.

const rows = useMemo(
    () =>
      cartsRounded.map((row, index) => ({
        ...row,
        id: index,
        serialNum: row.cartSerialNumber,
        pcNum: row.pcNumber,
        dateLastRounded: moment(row.updatedAt).format("MM-D-YYYY"),
        repairsNeeded: row.isPowerCordDamaged ? "Y" : "N" // short hand for if (row.isPowerCordDamaged === true) return "Y" else return "N",
        quarter: moment(row.updatedAt).format("Qo"),
      })),
    [cartsRounded]
  );

After looking it may be you want to return Y or N if any are true? In that case best pull it into a function.

const isRepairNeeded = (row) => {

  if (row.isPowerCordDamaged) return "Y";
  if (row.isFuseBlown) return "Y";
  ... rest of the ifs
  return "N"; // N is only returned if none of the if statements === true;
}

const rows = useMemo(
    () =>
      cartsRounded.map((row, index) => ({
        ...row,
        id: index,
        serialNum: row.cartSerialNumber,
        pcNum: row.pcNumber,
        dateLastRounded: moment(row.updatedAt).format("MM-D-YYYY"),
        repairsNeeded: isRepairNeeded(row) // call the function will return "Y" or "N",
        quarter: moment(row.updatedAt).format("Qo"),
      })),
    [cartsRounded]
  );

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading