OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

TypeScript type boolean not allowed when using && [duplicate]

  • Thread starter Thread starter tdammon
  • Start date Start date
T

tdammon

Guest
I have build a Typescript component that takes in an array of objects.

When I construct the array of objects there are a few objects that can be conditionally rendered. However, when I do this I see a TypeScript error telling me that a boolean cannot be assigned to the object.

Code:
Type '(false | { text: string; onClick: () => void; })[]' is not assignable to type '{ disabled?: boolean | undefined; text: string; onClick: () => void; }[]'.

My array construction looks something like this:

Code:
[
  {
    name: 'Bob'
  },
  isConnected && 
  {
    name: 'Tom'
  }
]

So when isConnected is true the second object should appear in the array. When it is false you shouldn't see the second object.

I know that I could allow boolean values in my component but this brings a different set of issues as I filter my array to remove any non-object values so allowing boolean values causes an issue with all my object.prop declatations.

Edit: The reason the duplicate link doesn't solve my issue is that I can't use a ternary to return nothing (I still have to return null which gets added to the array).

Ultimately what I want to do is say if isConnected is true add an element to the array. If it is not true than do nothing.

<p>I have build a Typescript component that takes in an array of objects.</p>
<p>When I construct the array of objects there are a few objects that can be conditionally rendered. However, when I do this I see a TypeScript error telling me that a boolean cannot be assigned to the object.</p>
<pre><code>Type '(false | { text: string; onClick: () => void; })[]' is not assignable to type '{ disabled?: boolean | undefined; text: string; onClick: () => void; }[]'.
</code></pre>
<p>My array construction looks something like this:</p>
<pre><code>[
{
name: 'Bob'
},
isConnected &&
{
name: 'Tom'
}
]
</code></pre>
<p>So when <code>isConnected</code> is true the second object should appear in the array. When it is false you shouldn't see the second object.</p>
<p>I know that I could allow boolean values in my component but this brings a different set of issues as I filter my array to remove any non-object values so allowing boolean values causes an issue with all my <code>object.prop</code> declatations.</p>
<p>Edit: The reason the duplicate link doesn't solve my issue is that I can't use a ternary to return nothing (I still have to return null which gets added to the array).</p>
<p>Ultimately what I want to do is say if <code>isConnected</code> is true add an element to the array. If it is not true than do nothing.</p>
 
Top