Reactjs update state after call component in functional component-CodePudding

I created a component called Alertify.js

import React, {useEffect, useState} from "react";
import { Alert } from 'reactstrap';

function Alertify(props){

    const [show, setShow] = useState(props.show);

        useEffect(
            () => {
                let timer = setTimeout(() => setShow(false), 3000);
                return () => {
                    clearTimeout(timer);
                };
            },
            []
        );

    return (
        <Alert color={props.color} className={show ? 'float active' : 'float'}>{props.text}</Alert>
    )
}

export default Alertify;

And used in index.js

import Alertify from "../Component/Alertify";
const [showAlert, setShowAlert] = useState(false);
return...
<Alertify text={'hello world'} color={'danger'} show={showAlert}/>

And it will show this alert after a condition is true:

if(condition){
setShowAlert(true)
}

But something is wrong and not show alert on condition, and I'm newbie to reactjs, any idea how to fix this? All I want is show alert after condition is true, then hide after 3 seconds.

Also it show if I remove useEffect but before condition true, and also not hiding.

CodePudding user response：

You shouldn't initialize your state with useState(props.show). That's an anti-pattern, you can read about it a bit more at https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

Do this instead

const [show, setShow] = useState(false);

useEffect(() => {
  if (props.show) {
   setShow(true)
  }
},[props.show])

You can leave your existing useEffect to clear after 3 seconds as is.

CodePudding user response：

Try this code. You can control rendering Alertify component in index.js. If showAlert value is true, React render Alertify component. When setTimeout executed, showAlert value will be false which means React unmount Alertify component. This is like show and hide effect as what you need.

// index.js
import Alertify from "../Component/Alertify";
const [showAlert, setShowAlert] = useState(false);

if (condition( {
  setShowAlert(true); // This makes Alertify component mount immediatly.
  setTimeout(setShowAlert(false),3000); // This makes Alertify component unmount in 3,000ms.
}

return...
{showAlert && <Alertify text={'hello world'} color={'danger'}/>}

Therefore, you don't need to use useEffect to make this component hide.

// Alertify.js
import React, {useEffect, useState} from "react";
import { Alert } from 'reactstrap';

function Alertify(props){

    return (
        <Alert color={props.color} className={'float active'}>{props.text
        </Alert>
    )
};

export default Alertify;