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.
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
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;