Question: I have the React class below that shows a list of users(zoomers).

Each `zoomer` has a property called `isHidden`.

When the page first loads, I want it to just show zoomers who have the `isHidden = false`.

I made a checkbox control that, when checked, should show all zoomers, including even the hidden ones.

When it's not checked, I don't want it to show any zoomer with `isHidden = true`.

So when I run the web app, and load this React component, it initially shows me no users at all...hidden or not hidden.

And when I click the checkbox, it reloads and just shows me the hidden users.

So it's not really doing what I am want it to do and I'm not sure why.

I was hoping someone could please show me the way.

Here is my code:

```
export default class ZoomerGrid extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
        zoomers: List(),
        showHidden: false
    };
  }

    toggleShowHidden = e => {
       const { value } = e.target;
        this.setState({ showHidden: true });
    }

    render() {

        let zoomersShowHidden = this.state.zoomers.toJS();
        zoomersShowHidden = zoomersShowHidden.filter(x => x.isHidden = this.state.showHidden);

        return (
            <div>
                Show Hidden Zoomers? <input type="checkbox" name="test" onChange={this.toggleShowHidden} value="false" />
                {zoomersShowHidden.map((zoomer) => <ZoomerTile key={zoomer.id} zoomer={zoomer} />)}
            </div>
        );
   }
}

Thanks!

```

Answer: 
Here's a solution I came to that uses a trampolining technique to defer the typescript type so it doesn't throw recursive type errors.

```js
export type KebabCase<S> = S extends `${infer C}${infer T}`
  ? KebabCase<T> extends infer U
    ? U extends string
      ? T extends Uncapitalize<T>
        ? `${Uncapitalize<C>}${U}`
        : `${Uncapitalize<C>}-${U}`
      : never
    : never
  : S

```
Here you have another approach:

```js
export interface CssProperties {
    alignContent: number | string | null;
    alignItems: number | string | null;
    alignSelf: number | string | null;
    alignmentBaseline: number | string | null;
}

type ToCebab<T extends string> =
    T extends `align${infer Prefix}`
    ? `aling-${Uncapitalize<Prefix>}`
    : never;

type Result = {
    [P in keyof CssProperties as ToCebab<P>]: CssProperties[P]
} & CssProperties

```

[Playground link](https://www.typescriptlang.org/play?ssl=15&ssc=18&pln=1&pc=1#code/KYDwDg9gTgLgBASwHY2FAZgQwMbDgYQGdCAFKCMNGBYQuAbwCg4W5MAbBAcyXwhWAoAXHCQBXALYAjNHAA%20cQjCjIu80WPbsA3M1YduSAJKoJhEeOmyFSlUjULxW3azaceAZWDt0FyTKh1W1V1Jx09FgMeCUEYACFMQm9kYD8rQJtlEMdNcIBfRkYYAE9KOAAVCHxgKUwpAB5yuFBUJAATOmD7AD44AF4IiuaQVo64AAMopAASemR0WTJgdAQQPPHBgH4Jg3sAWlmAVSRsTDAEGAMAL2B6pZWQbvXBi2AANzRdItK8ACVaTTwPoMQYAbRIiCQcAA1sBihB0ARiGQKFQaHREhUqjU6ndugBdEREUjkSiwdHg-GMPJwABkSJJqPJtEKjCAA)

[Template literal strings - Uncapitalize](https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html#uncapitalizestringtype)