How to bypass error type never?

Hello.
Here's an example:
const MyComponent: React.FC = () => {
 const buttonEl = useRef(null);
 useEffect( ()=>{
 function scrollHandler(): void { 
 var buttonHtmlEl: HTMLElement | null = buttonEl.current;
 if ( buttonHtmlEl ) {
 window.pageYOffset > 50 ? buttontHtmlEl.classList.remove('is-hide') : buttonHtmlEl.classList.add('is-hide')
// ClassList highlights here and says that the type never
// no SV-VA classList
 } else {
console.error('...');
}
}
 window.addEventListener('scroll', scrollHandler);
 return ()=>{
 window.removeEventListener('scroll', scrollHandler);
 } 
}
)
 return (
 <button ref={bttEl} onClick={toTop}>lioih </button>
)
}

says there's a type of never Holy island classList...
first swearing also null, I dobbel if, now swears by never, tried try-catch does not help.
what to do? tell me
March 23rd 20 at 18:41
2 answers
March 23rd 20 at 18:43
Solution
To React developing a welcome approach with a change of state:
interface State {
 shouldShowBtn: boolean;
}

class MyComponent extends React.Component<null State> {
 state = {
 shouldShowBtn: true,
};

 componentDidMount() {
 window.addEventListener('scroll', this.scrollHandler);
}

 scrollHandler = () => {
 const { shouldShowBtn } = this.state;

 if (window.pageYOffset > 50 && shouldShowBtn) {
 this.setState({ shouldShowBtn: false });
 } else if (window.pageYOffset <= 50 && !shouldShowBtn) {
 this.setState({ shouldShowBtn: true });
}
};

 componentWillUnmount() {
 window.removeEventListener('scroll', this.scrollHandler);
}

 render() {
 return (
<>
 {this.state.shouldShowBtn && <button>lioih </button>}
</>
);
}
}

or:
const MyComponent: React.FC = () => {
 const [shouldShowBtn, setShouldShowBtn] = useState(true);

 const context = useMemo(() => ({ shouldShowBtn }), []);

 useEffect(() => {
 context.shouldShowBtn = shouldShowBtn;
 }, [shouldShowBtn]);

 useEffect(() => {
 const scrollHandler = () => {
 if (window.pageYOffset > 50 && context.shouldShowBtn) {
setShouldShowBtn(false);
 } else if (window.pageYOffset <= 50 && !context.shouldShowBtn) {
setShouldShowBtn(true);
}
};

 window.addEventListener('scroll', scrollHandler);

 return () => {
 window.removeEventListener('scroll', scrollHandler);
};
 }, []);

 return (
<>
 {shouldShowBtn && <button>lioih </button>}
</>
);
};


Even for such cases a custom hook to write:
const useGetState = (initialState: any) => {
 const [state _setState] = useState(initialState);
 const context = useMemo(() => ({ state }), []);
 const getState: any = useCallback(() => context.state, []);
 const setState = useCallback((state) => {
 context.state = state;
_setState(state);
 }, []);

 return [getState, setState];
};

and then:
const MyComponent: React.FC = () => {
 const [getShouldShowBtn, setShouldShowBtn] = useGetState(true);

 useEffect(() => {
 const scrollHandler = () => {
 console.log(window.pageYOffset, getShouldShowBtn());
 if (window.pageYOffset > 50 && getShouldShowBtn()) {
setShouldShowBtn(false);
 } else if (window.pageYOffset <= 50 && !getShouldShowBtn()) {
setShouldShowBtn(true);
}
}
 window.addEventListener("scroll", scrollHandler);
 return () => {
 window.removeEventListener("scroll", scrollHandler);
};
 }, []);
 return <div>{getShouldShowBtn() && <button>lioih </button>}</div>;
};
return <div>{getShouldShowBtn() && <button>lioih </button>}</div>;

this design is not suitable - I need it a class to add and remove, maybe the item is moved and not just "no".
if you try construction className... How to React to add and remove a class depending on a condition? - Kayleigh_Walker23 commented on March 23rd 20 at 18:46
@Kayleigh_Walker23,
return <button className={getShouldShowBtn() ? ": 'is-hide'}>lioih </button>};

I would still for the particular case used the class component. The absence of functional components of a context which could be requested of the listeners third-party API, breeds like crutches given me the realization useGetState.
Else for conditional compilation of classes there is a convenient library classnames. - melissa.Hilll commented on March 23rd 20 at 18:49
March 23rd 20 at 18:45
Solution
about how it is generally better to reacte to do, you wrote to @melissa.Hilll, specifically the problem with tipsipoozie types can be solved parametritis type of reference:
const buttonEl = useRef<HTMLButtonElement>();
buttonEl.current.classList.add("is-hide");
return <button ref={buttonEl}>lioih</button>;
does not help:
the compiler declares that the type <HTMLElement>is incompatible with <HTMLElement | null>
if specified as type <HTMLElement | null>, it says that null has no properties classList, enter a null check - if () the problem starts with never - Kayleigh_Walker23 commented on March 23rd 20 at 18:48
not true.
https://stackblitz.com/edit/react-ts-icnk1w - Astrid_Lind10 commented on March 23rd 20 at 18:51
@Astrid_Lind10,
Here is my code
works!
I simplified, of course: I have SVG + appears-disappears, and so on, but the functionality of something that...
And I do not work! Using VS Code by default.
The ones I have configured like this:
I have TS configuration WebPack do not - he compiled quietly and files that compiler not showing, and then dev-server picks up, but here is tsc error throws ...
So I have earned:
const bttEl = useRef<HTMLSpanElement>(null);
 function scrollHandler(): void { 
 var bttHtmlEl: HTMLSpanElement | null = bttEl.current;

| null added...
now you have to understand why in one case compiled so, but not in another - apparently the settings ТSLint?
@Astrid_Lind10, it turns out You were right you need to add
wow ))) - Kayleigh_Walker23 commented on March 23rd 20 at 18:54
obviously, "strictNullChecks": true in tsconfig worth it.

understood? now throw it and do as Anton says. like the thread this way: https://stackblitz.com/edit/react-ts-mvngsz - Astrid_Lind10 commented on March 23rd 20 at 18:57

Find more questions by tags ReactTypeScript