Effect CommunityEC
Effect Community•2y ago
lambeco

Troubleshooting `Match` Usage for Conditional Rendering in React

I'm having a little trouble getting Match to work as I would expect. I'm using it with React to render different content if an array is empty:

import { Match, ReadonlyArray } from 'effect';

export interface FooComponentProps {
  values: number[];
}

export function FooComponent(props: FooComponentProps) {
  return (
    <div>
      {Match.value(props.values).pipe(
        Match.when(ReadonlyArray.isNonEmptyArray, (values) => (
          <ul>
            {ReadonlyArray.map(values, (x) => (
              <li>{x}</li>
            ))}
          </ul>
        )),
        Match.orElse(() => <>No values to display!</>),
      )}
    </div>
  );
}


I would expect that the values parameter in the second when argument would have a type of NonEmptyArray<number> but it's NonEmptyArray<unknown>. I feel like I must be missing something about how Match.when works... The docs only seem to use predicates on fields of the matched value. Is it incorrect to use a predicate on the whole value?
Was this page helpful?