Call a function of class component for setting state , but values not updating

Question

api-service.js code

import CustomToaster from "../toaster/toaster";

export async function saveData(){
    return new Promise(async(resolve)=>{
        try {
            let res=await fetch('http://localhost:5000/test',{
                //mode: 'no-cors'
                headers:{ "authorization":"my-auth-token" }
            })
    
            const data = await res.json();
    
           return resolve(data)
        } catch (error) {
            console.log(error)
            showAlert(error)
        }

    })
}
export async function showAlert(err){
    let d = new CustomToaster()
    await d.componentDidMount()
    d.setToaster('hello','my world',12)
    
}

toaster.js code

import { Component } from "react";
import { Toast } from "react-bootstrap";

class CustomToaster extends Component {
    
    

    constructor(props) {
        super(props)    
        this.state={
            title:'no title',
            time:'2 min',
            description:'no desription',
            show:false
        }
    }
    componentDidMount(title, description='',time='',delay=5000){
        return new Promise((resolve)=>{
            resolve(true)
        })
    }
    setToaster = (title, description='',time='',delay=5000)=>{
        if(title){
            this.setState(() => ({
                title:title
            }))
        }
        if(time){
            this.setState({
                time:time
            })
        }
        if(description){
            this.setState({
                description:description
            })
        }
        this.setState({
            show:true
        })

    }
    render() {
        return (
            <Toast show={this.state.show} delay='2000' autohide>
                <Toast.Header>
                    <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" />
                    <strong className="me-auto">{this.state.title}</strong>
                    <small>{this.state.time}</small>
                </Toast.Header>
                <Toast.Body>{this.state.description}</Toast.Body>
            </Toast>
        )
    }
}

export default CustomToaster;

setToaster function is not able to set state i am also getting warning Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the CustomToaster component.

[Is it an anti-pattern to use async/await inside of a new Promise() constructor?](https://stackoverflow.com/q/43036229) | [What is the explicit promise construction antipattern and how do I avoid it?](https://stackoverflow.com/q/23803743) — VLAZ, Jul 07 '22 at 11:31
I suggest working through some basic React tutorials (such as [the one](https://reactjs.org/tutorial/tutorial.html) on the React website). — T.J. Crowder, Jul 07 '22 at 11:36
Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community, Jul 07 '22 at 11:58

score 0 · Answer 1 · answered Jul 07 '22 at 11:35

This is not how you create or mount a component:

// Not how you do this
let d = new CustomToaster()

Instead, you render the component in the render function of another class component or the function of a function component, via ReactDOM.render, via render on a root, or in a portal.

You're getting that error from setState because that isn't how you create or mount a component.

If you need to have a reference to the component instance so you can call a method on it, you'll need to use a ref on it and call the method on the ref's current property.

Call a function of class component for setting state , but values not updating

1 Answers1