Reactjs update state after call component in functional component

Question

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.

Answer 1

Try the following

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.

EDIT:

Here's a modified approach, your Alertify component looks like so

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

function Alertify(props: {
  show: any;
  color: string;
  text: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal;
  setShowAlert: (value: boolean) => void;
}) {
  const [show, setShow] = useState(false);

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

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

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

  return null;
}

export default Alertify;

Your calling component then looks like so

import "./styles.css";
import Alertify from "./Alertify";
import { useState } from "react";

export default function App() {
  const [showAlert, setShowAlert] = useState(false);
  return (
    <>
      <div className="App">
        <Alertify
          text={"hello world"}
          color={"danger"}
          show={showAlert}
          setShowAlert={setShowAlert}
        />
      </div>
      <button onClick={() => setShowAlert(true)}>show alert</button>
    </>
  );
}

Here's the codesandbox link https://codesandbox.io/s/alertify-stackoverflow-x096t