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; }[]'.
</code>
<code>Type '(false | { text: string; onClick: () => void; })[]' is not assignable to type '{ disabled?: boolean | undefined; text: string; onClick: () => void; }[]'.
</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'
}
]
</code>
<code>[
{
name: 'Bob'
},
isConnected &&
{
name: 'Tom'
}
]
</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.
2