Is there a way to silence TypeScript's complaints about a React rendered value being converted into a Date object?

Question

Is there a way to silence TypeScript's complaints about a React rendered value being converted into a Date object?

In my latest project using Next.js, TypeScript, Prisma, and Radix-UI, I'm working with a loan object that has various key-value pairs:

{
    "id": 25,
    "borrowerName": "Test Borrower 1",
    "pipelineStage": "PROSPECT",
    "loanAmount": 500000,
    "transactionType": "PURCHASE",
    "referralSource": "Realtor Lenny",
    "borrowerEmail": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd89988e89ccbd9a909c9491d39e9290">[email protected]</a>",
    "propertyAddress": "1234 Test Way",
    "borrowerPhone": "789-546-3142",
    "purchasePrice": 700000,
    "creditScore": 700,
    "createdAt": "2024-03-15T21:46:18.347Z",
    "updatedAt": "2024-03-15T21:46:18.347Z"
}

One of the challenges I encountered was when building a "view single loan" page while trying to convert the createdAt and updatedAt strings from ISO format into a more user-friendly format. Here's a snippet of the code where I loop over the keys and values in one go:

{Object.keys(loan || {}).map((loanKey) => {
                if (loanKey === "id") return null;

                if (loan && loanKey in loan) {
                  let value: string | number | Date | null =
                    loan[loanKey as keyof typeof loan];

                  if (loanKey === "createdAt" || loanKey === "updatedAt") {
                    value = new Date(value!).toLocaleString(undefined, {
                      year: "numeric",
                      month: "long",
                      day: "numeric",
                      hour: "numeric",
                      minute: "numeric",
                    });
                  }
                  return (
                    <Card className="text-black">
                      <Flex direction={"column"} align={"center"}>
                        <Text>{formatKeyDisplay(loanKey)}: </Text>
                        <Card>{value}</Card>
                      </Flex>
                    </Card>
                  );
                }
                return null;
              })}

Even though I attempted to cast the value to a Date object and then back to a string for rendering purposes, TypeScript still raised an error stating:

Type 'string | Date | null' is not assignable to type 'ReactNode'.
  Type 'Date' is not assignable to type 'ReactNode'.ts(2322)

I also tried typing the value differently with

let value: string | number | null = loan[loanKey as keyof typeof loan];

but it led to another TypeScript error:

Type 'string | number | Date | null' is not assignable to type 'string | number | null'.
  Type 'Date' is not assignable to type 'string | number | null'.ts(2322)

typescript next.js prisma radix-ui

Answer 1

Answer №1

For better organization, it is recommended to use separate variables for the unprocessed value and the processed value that you can guarantee will not be a Date:

let rawValue: string | number | Date | null =
  loan[loanKey as keyof typeof loan];
let value: string | number | null;

if (loanKey === "createdAt" || loanKey === "updatedAt") {
  value = new Date(rawValue!).toLocaleString(undefined, {
    year: "numeric",
    month: "long",
    day: "numeric",
    hour: "numeric",
    minute: "numeric",
  });
} else if (rawValue instanceof Date) {
  // Throw error, as only specific keys should contain dates
  throw new Error(`Unexpected Date for field "${loanKey}"`);
} else {
  // This assignment should be safe after filtering out Date types above
  value = rawValue;
}

Playground link

Answer 2

For better organization, it is recommended to use separate variables for the unprocessed value and the processed value that you can guarantee will not be a Date:

let rawValue: string | number | Date | null =
  loan[loanKey as keyof typeof loan];
let value: string | number | null;

if (loanKey === "createdAt" || loanKey === "updatedAt") {
  value = new Date(rawValue!).toLocaleString(undefined, {
    year: "numeric",
    month: "long",
    day: "numeric",
    hour: "numeric",
    minute: "numeric",
  });
} else if (rawValue instanceof Date) {
  // Throw error, as only specific keys should contain dates
  throw new Error(`Unexpected Date for field "${loanKey}"`);
} else {
  // This assignment should be safe after filtering out Date types above
  value = rawValue;
}

Playground link

Answer 3

Answer №2

To show a different message on the screen, create a new variable called displayValue and assign it the desired string instead of overwriting the existing variable value. This approach helps Typescript maintain proper type consistency without any confusion.

Answer 4

To show a different message on the screen, create a new variable called displayValue and assign it the desired string instead of overwriting the existing variable value. This approach helps Typescript maintain proper type consistency without any confusion.

Answer 5

Answer №3

I attempted to replicate the issue you mentioned on a test scenario, but I did not encounter any errors.

import React from 'react';

const displayFormattedKey = (key: string) => {
    return key.toString();
};

export default function App() {
    const sampleData = {
        id: 25,
        borrowerName: "Test Borrower 1",
        pipelineStage: "PROSPECT",
        loanAmount: 500000,
        transactionType: "PURCHASE",
        referralSource: "Realtor Lenny",
        borrowerEmail: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f98d9c8a8dc8b99e94989095d79a9694">[email protected]</a>",
        propertyAddress: "1234 Test Way",
        borrowerPhone: "789-546-3142",
        purchasePrice: 700000,
        creditScore: 700,
        createdAt: "2024-03-15T21:46:18.347Z",
        updatedAt: "2024-03-15T21:46:18.347Z"
    };

    return (
        <div style={{backgroundColor: "white", width: "100%", minWidth: "500px"}}>
        {Object.keys(sampleData || {}).map((dataKey) => {
            if (dataKey === "id") return null;

            if (sampleData && dataKey in sampleData) {
                let value: string | number | Date | null =
                    sampleData[dataKey as keyof typeof sampleData];

                if (dataKey === "createdAt" || dataKey === "updatedAt") {
                    value = new Date(value!).toLocaleString(undefined, {
                        year: "numeric",
                        month: "long",
                        day: "numeric",
                        hour: "numeric",
                        minute: "numeric",
                    });
                }
                return (
                    <div className="text-black" key={dataKey}>
                    <div style={{display: "flex", gap: "15px", direction: "row"}}>
                        <div>{displayFormattedKey(dataKey)}: </div>
                        <div>{value}</div>
                    </div>
                    </div>
                );
            }
            return null;
        })}
        </div>
    );
}

Is it possible for you to create a Component demo so we can correctly identify the issue?

Answer 6

I attempted to replicate the issue you mentioned on a test scenario, but I did not encounter any errors.

import React from 'react';

const displayFormattedKey = (key: string) => {
    return key.toString();
};

export default function App() {
    const sampleData = {
        id: 25,
        borrowerName: "Test Borrower 1",
        pipelineStage: "PROSPECT",
        loanAmount: 500000,
        transactionType: "PURCHASE",
        referralSource: "Realtor Lenny",
        borrowerEmail: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f98d9c8a8dc8b99e94989095d79a9694">[email protected]</a>",
        propertyAddress: "1234 Test Way",
        borrowerPhone: "789-546-3142",
        purchasePrice: 700000,
        creditScore: 700,
        createdAt: "2024-03-15T21:46:18.347Z",
        updatedAt: "2024-03-15T21:46:18.347Z"
    };

    return (
        <div style={{backgroundColor: "white", width: "100%", minWidth: "500px"}}>
        {Object.keys(sampleData || {}).map((dataKey) => {
            if (dataKey === "id") return null;

            if (sampleData && dataKey in sampleData) {
                let value: string | number | Date | null =
                    sampleData[dataKey as keyof typeof sampleData];

                if (dataKey === "createdAt" || dataKey === "updatedAt") {
                    value = new Date(value!).toLocaleString(undefined, {
                        year: "numeric",
                        month: "long",
                        day: "numeric",
                        hour: "numeric",
                        minute: "numeric",
                    });
                }
                return (
                    <div className="text-black" key={dataKey}>
                    <div style={{display: "flex", gap: "15px", direction: "row"}}>
                        <div>{displayFormattedKey(dataKey)}: </div>
                        <div>{value}</div>
                    </div>
                    </div>
                );
            }
            return null;
        })}
        </div>
    );
}

Is it possible for you to create a Component demo so we can correctly identify the issue?

Is there a way to silence TypeScript's complaints about a React rendered value being converted into a Date object?

Answer №1

Answer №2

Answer №3

Similar questions

Steps to replenish the firebase cacheHere's how you

Fetching data from the server in NextJS based on user input

Error encountered: Parsing error in Typescript eslint - The use of the keyword 'import' is restricted

Type guards do not work properly on a union of enum types in TypeScript

Remap Objects Function with Correct Return Data Type

Frustratingly Quiet S3 Upload Failures in Live Environment

Implementing Service Communication

When using Angular version 13 alongside rxjs 7.4 and TypeScript 4+, an issue arises with the error message: "Declaration file for module 'rxjs' not found"

Generate a collection of elements using a different collection as a reference

What could be the reason behind the error related to react-router-dom?

Ways to keep information hidden from users until they actively search for it

Allowing scroll events to flow through from a child <div> to <canvas> in Excalidraw

When utilizing the file-loader in Webpack with a function in the outputPath parameter, an EISDIR error occurs,

Upon attempting to utilize Socket.io with Next.JS custom server, the server repeatedly restarts due to the error message "address already in

Encountering an issue with Next Start - Unable to locate index.js file and receiving an error stating module cannot

Exploring the not-found.tsx page within the framework of multiple root layout.jsx components in Next JS

Combinations of Typescript dependent unions

Invoke the method in customButton component of fullcalendar

Using Angular 5+ to fetch information from an ASP.NET Core Web API

Component coding in Angular 2 allows for seamless integration and customization of Material