Map of Array Having Two Different Type of values in Type script

Question

I am using react-typescript with vite. in my situation for arr interface I have option which is of type array of options or an array of strings. When I try to map and print them I am getting error on val.name which is

any
Property 'name' does not exist on type 'string | Options'.
  Property 'name' does not exist on type 'string'.ts(2339)

and on val

    (parameter) val: string | Options
Type 'string | Options' is not assignable to type 'ReactNode'.
  Type 'Options' is not assignable to type 'ReactNode'.ts(2322)
index.d.ts(1373, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>'

How to solve this problem. Thanks in advance

import React from 'react';
interface Options {
    name: string;
}
interface arr {
    option: Options[] | string[];
}
const MapOfArrayHavingTwoDifferentTypes: React.FC<arr> = ({ option }) => {

    return (
        <>
            {
                option.length > 0 && option[0].hasOwnProperty("name") ?
                    option.map((val) => <p>{val.name}</p>) :
                    option.map((val) => <p>{val}</p>)
            }
        </>
    )
}

export default MapOfArrayHavingTwoDifferentTypes;

If the question helps please upvote it. Thank you

CertainPerformance · Accepted Answer · 2022-09-02 02:53:56Z

1

Check the type inside the mapper function, not outside, for effective narrowing.

const MapOfArrayHavingTwoDifferentTypes: React.FC<arr> = ({ option }) => (
    <>
        {
            option.map(val => (
                <p>{typeof val === 'string' ? val : val.name}</p>
            ))
        }
    </>
);

answered Sep 2, 2022 at 2:53

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ramu Sompalli Over a year ago

Thank you very much. In between is there any possible way that we can do that outside map.

CertainPerformance Over a year ago

You would need a way to determine, at runtime, whether the array is an array of strings or an array of something else. Not impossible, but it'd be ugly and would either require an extraneous argument (like an optionType string, with the function overloaded to have the string match the array item type) or type assertions, which are smelly when not strictly necessary. Doing it inside the callback makes much more sense, I think.

Collectives™ on Stack Overflow

Map of Array Having Two Different Type of values in Type script

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related