Functional vs imperative (statements): writing this in the most compact way

153 Views Asked by At

Looking for the shortest, most elegant wat to write this. I really like option 2. However, i get this error:

Argument of type 'boolean[]' is not assignable to parameter of type 'SetStateAction<ISlugSegment[]>

Which makes sense cause in #2 I am returning endpoint.autoGenerate, which is a boolean.

So, asking for some guidance here on how to re-rewrite #1 in the shortest way.

This is React by the way. Using the useState hook.

let [_endpoints, _setEndpoints] = useState(params.endpoints);

// 1. verbose (imperative?)
    const copiedEndpoints = _endpoints.map((endpoint: ISlugSegment) => {
      endpoint.autoGenerate = (endpoint.localeKey === _selectedLocale) ? endpoint.autoGenerate = false : endpoint.autoGenerate;
      return endpoint;
    });
_setEndpoints(copiedEndpoints);
// end

// 2. short: 1 line (functional?)
    _setEndpoints(_endpoints.map((endpoint: ISlugSegment) => (endpoint.localeKey === _selectedLocale) ? endpoint.autoGenerate = false : endpoint.autoGenerate));
// end

#2 results in an array of Booleans instead of an Array with ISlugSegments Objects. And what I need is the latter.

1

There are 1 best solutions below

2
On

You can use the second approach if you satisfy Typescript by explicitly stating the types to useState

let [_endpoints, _setEndpoints] = useState<Array<ISlugSegment|boolean>>(params.endpoints)