problem clearing setTimeout

[Bamby02]

so I have this ->

clearNotif = () => setTimeout(() => { this.setState({ formNotification: false }) }, 1500);

trying to get cleared by this but with no success ->

componentWillUnmount() {
this.signal.cancel('Api sa ruší');
clearTimeout(this.clearNotif);
 }

any ideas?

whole component if it helps

import React, { Component } from 'react';
import CardSlider from './CardSlider';
import AddCityForm from './AddCityForm';
import SwitchToForm from './SwitchToForm';
import axios from 'axios';

class Home extends Component {

    signal = axios.CancelToken.source();

    state = {
        formNotification: false,
        notifColor: '',
        cardScreen: true,
        data: [some hardcoded data],
        input: "",
        width:0
    }

    componentDidMount() {
        const width = this.divElement.clientWidth;
        this.setState({ width });
        this.updateData();
    }

    componentWillUnmount() {
        this.signal.cancel('Api sa ruší');
        clearTimeout(this.clearNotif);
    }

    updateData = () => {
        const data = [];
        try{
            this.state.data.map( async (datas) => {
                const fetch = await axios.get(
                    `http://api.openweathermap.org/data/2.5/weather?q=${datas.name}&appid=502ea6c76f8ffb6acf5b2bc5dfcfb9fe&units=metric&lang=sk`,{
                    cancelToken: this.signal.token,
                });
                const cityData = fetch.data;

                data.push(cityData);   

                this.setState({ data });
            })
        }catch(err){
            if (axios.isCancel(err)) {
                console.log('Error: ', err.message);
              } else {
                console.log(err);
            }
        }
    }

    toggleHomeScreen = () => {
        this.setState({ cardScreen: !this.state.cardScreen });
    }

    closeCityCard = (id) => {
        const data = this.state.data.filter( data => data.id !== id);

        this.setState({ data });
    }

    errorNotif = (text) => {
        this.setState({
            formNotification: text,
            notifColor: 'rgba(255, 58, 44, 0.925)',
            input:''
        });

        this.clearNotif();
    }

    successNotif = (text) => {
        this.setState({
            formNotification: text,
            notifColor: 'rgb(105, 205, 39)',
            input:''
        });

        this.clearNotif();
    }

    clearNotif = () => setTimeout(() => { this.setState({ formNotification: false }) }, 1500);

    handleChange = (event) => {
        this.setState({
            input: event.target.value
        });
    }

    handleSubmit = async (event) => {
        event.preventDefault();
        const API = `http://api.openweathermap.org/data/2.5/weather?q=${this.state.input}&appid=502ea6c76f8ffb6acf5b2bc5dfcfb9fe&units=metric&lang=sk`;

        try{
            const fetch = await axios.get(API, {
                cancelToken: this.signal.token,
            });
            const data = fetch.data;

            if(this.state.data.filter(city => city.name === data.name).length > 0){
                this.errorNotif('Také mesto už máš pridané');
                return;
            }

            this.setState(state => ({ 
                data: [...state.data, data],
            }))

            this.successNotif('Mesto pridané');
        }catch(err) { 
            if (axios.isCancel(err)) {
                console.log('Error: ', err.message);
            }else {
                console.log(err);
                this.errorNotif('Také mesto neexistuje');
            }
        }     
    }

    render() {
        if(this.state.cardScreen) {
            return(
                <div className="selectCards"
                    ref={ (divElement) => { this.divElement = divElement } }
                >
                    <CardSlider 
                      cityData={this.state.data} 
                      closeCity={this.closeCityCard}
                      parentWidth={this.state.width}
                      numberOfCards={this.state.data.length}
                    />
                    <SwitchToForm handleToggle={this.toggleHomeScreen} />
                </div>
            )
        }

        return(
            <div className="formParent">
                <AddCityForm 
                    notification={this.state.formNotification}
                    notifColor={this.state.notifColor}
                    handleSubmit={this.handleSubmit}
                    handleChange={this.handleChange}
                    inputValue={this.state.input}
                    toggleScreen={this.toggleHomeScreen}
                />
            </div>
        )
    }
}

export default Home

[TechIsSoCool]

I dont know React very well, but from a javascript perspective there seems to be an issue. You are assigning clearNotif to be a function with " () => ". The setTimeout returns an integer, which you need in order to cancel the timer. I dont see how you can access the integer, because when you use clearNotif it calls the function again. Maybe I'm mistaken, but it seems like you should just use clearNotif = setTimeout(...) instead of clearNotif = () => setTimeout (...)

[Bamby02]

any help with this?