ReactJS with Typescript not accepting Object with properties

Question

I am trying to apply TypeScript in my ReactJS project. I am starting apply it to one of my components but somehow I am having hard time applying typescript when a components accepts object with properties as its props.

Here is my code

interface iValue {
 results: string[] | number[];
}

interface DropDownInputInt {
 name: string;
 value: iValue | string;
 multiple: boolean;
}

const DropDownInput = ({
 name,
 value,
 multiple
}: DropDownInputInt) => {

 return (
  <> 
   <Dropdown
     name={name}
     value={multiple && value
           ? value.hasOwnProperty('results')
              ? value.results
              : value
           : value
          }

    />
  </>
 )
})

For my props named "value" I am accepting 2 possible inputs, string or an object(with 'results' key and can have both an array string or number)

See image below for a sample of props.value that has a string value.

Not sure why but currently my VSCode is showing errors when I tried to use value.results. See image below for the error.

UPDATE

I tried to incopmperate some answers from

interface iValue {
 results: (string | number | boolean)[];
}

interface DropDownInputInt {
 name: string;
 value: iValue | boolean | number | string;
 multiple: boolean;
}

const DropDownInput = ({
 name,
 value,
 multiple
}: DropDownInputInt) => {

return (
 <> 
   <Dropdown
     name={name}
      value={
      multiple && value
        ? typeof value === 'string' ||
          typeof value === 'number' ||
          typeof value === 'boolean'
          ? value
          : value.results
        : typeof value === 'object' && value
    }
    />
   </>
   )
 })

But I am still getting errors, now its pointing to value property in my Dropdown

But when I check the property that being accepted by the "Dropdown" component

Thanks in advance

If your value contains a string, .results doesn't exists. value isn't a object. You can set the type: interface iValue { results: string[] | number[]| string; } interface DropDownInputInt { name: string; value: iValue; multiple: boolean; } and always save on value like a object. — ESI
– ESI, Commented Mar 30, 2020 at 8:08
I cannot put string in my results because in the 2nd screenshot I posted the 'results' key doesnt exists — Hawk
– Hawk, Commented Mar 30, 2020 at 16:49

Shlang · Accepted Answer · 2020-03-30 08:16:22Z

2

value can be string or object, when it is a string it still has hasOwnProperty because of boxing. Potentially it might have results field and fit iValue type, in practice you cannot assign a property to primitive string but TS does not take it into account.

More predictable check is needed, for example

value={multiple && value
  ? typeof value === "object" && value.hasOwnProperty('results')
    ? value.results
    : value
  : value

or it could be reversed

value={multiple && value
  ? typeof value === "string"
    ? value
    : value.results
  : value

answered Mar 30, 2020 at 8:16

Shlang

3,29019 silver badges31 bronze badges

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

4 Comments

Hawk Over a year ago

Just woke up, ill try this one TIA

Hawk Over a year ago

@Shlag I did some edit in my code but somehow it throwing a different error.

Shlang Over a year ago

@Billy that is because if you pass multiple=false the value passes as is and its type is value: iValue | boolean | number | string; and that is not compatible with the Dropdown props

Hawk Over a year ago

Hi @Shlang, I added this on my code "typeof value === 'object' && value" to check if its an object if the multiple is false but it still giving me error

Hawk · Accepted Answer · 2020-03-30 21:12:39Z

0

I think I solve it using. Thank you @Shlang for point out the problem

interface iValue {
 results: (string | number | boolean)[];
}

interface DropDownInputInt {
 name: string;
 value: iValue | boolean | number | string;
 multiple: boolean;
}

const DropDownInput = ({
 name,
 value,
 multiple
}: DropDownInputInt) => {

return (
 <> 
   <Dropdown
     name={name}
      value={
      multiple && value
        ? typeof value === 'string' ||
          typeof value === 'number' ||
          typeof value === 'boolean'
          ? value
          : value.results
        : typeof value === 'object' && value
    }
    />
   </>
   )
 })

answered Mar 30, 2020 at 21:12

Hawk

5281 gold badge9 silver badges26 bronze badges

Comments

SquattingSlavInTracksuit · Accepted Answer · 2020-03-30 21:29:35Z

-1

TS is not smart enough to figure this out on its own (i.e. to figure out that it's not a string, but an iValue) so you need to help it out using a type guard, e.g.

    function isIValue(value: string | iValue): value is iValue {
      return typeof value !== "string"
    }

The value is iValue annotation essentially tells the Typescript type system that if the function returns true, the argument is of type iValue.

Hence you can then do:

   <Dropdown
     name={name}
     value={(multiple && isIValue(value) && value.results) || value}
    />

edited Mar 30, 2020 at 21:29

answered Mar 30, 2020 at 21:20

SquattingSlavInTracksuit

1,1073 gold badges11 silver badges19 bronze badges

Collectives™ on Stack Overflow

ReactJS with Typescript not accepting Object with properties

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related