React is an open-source JavaScript library for building user interfaces, usually for single-page and mobile applications. A user interface in React is built around components, each of which is a Javascript function defined by the user.
The Alert component in React.js serves as an important element for providing feedback or conveying important information to users within a web application. Alerts are prominently used to notify users about successful actions, errors, and warnings or to prompt certain actions. In React JS, there is a default alert that can be easily generated using the following:
alert('Done')
However, these default alerts appear at the top of the screen and are not visually appealing. This is why we seldom see them in the web and mobile applications we use. Generally, the alerts we encounter in web applications appear on the screen, like the one in the section below.
Click “Run” to execute the example. Enter any text in the textbox and click “Send.” An alert will appear on the screen to confirm that your message has been sent.
In this example, we’ll create the alert component from the example above for the success condition by using the following steps:
We’ll create a container that will show the content of the alert. In this case, the alert container will show the “Action Successful!” text. After this, we’ll create a button that triggers a window reload on click.
export default function AlertComponent() {function handleOKButton(){window.location.reload();}return (<div className="alertContainer"><div className="alertBoxAppearence"><h3 className='alertHeading'>Action Successful!</h3><FaCheck id='alertIcon'/><button className="alertButton"onClick={(e)=>handleOKButton()}>OK</button></div></div>)}
It’s time to render the Alert component when a success condition occurs. In this example, an alert “Action successful!” appears on the screen when some data is sent. No alert will be generated if no data is sent. To incorporate this functionality, we’ll create a text box using the <input></input>
tag.
<inputtype="text"placeholder="Enter text..."value={inputValue}onChange={(e) => setInputValue(e.target.value)}/>
As the alert has to appear when some data is sent, we’ll create a “Send” button. This button will be handled using a constant function handleSendClick()
.
import Alerts from './components/Alerts'const [inputValue, setInputValue] = useState('');const [showAlert, setShowAlert] = useState(false);const handleSendClick = () => {if (inputValue.trim() !== '') {setShowAlert(true);}};return(<button onClick={handleSendClick}>Send</button>{showAlert && <Alerts />});
(inputValue.trim() !== '')
checks whether the inputValue
variable, which contains the content of an input field, is not an empty string after removing leading and trailing whitespace using the trim()
method.
In src/components/Alerts.jsx
:
Lines 1–3: Necessary libraries and CSS file is imported.
Lines 7–10: A function is created to handle the “OK” button of the alert component. It will reload the React window to restart the application.
Line 12: This line creates the alert box and adds the necessary CSS to the alert component.
Line 15: This adds an icon to the alert component.
Lines 16–17: This creates an “OK” button for the alert component, which is being handled by the function handleOKButton
we created at the start of Alerts.jsx
file.
In src/App.js
:
Lines 5–6: This initializes state variables using useState
hook.
Lines 8–12: This defines a function handleSendClick
which is triggered when the “Send” button is clicked. It checks if the inputValue
is not empty (after removing leading and trailing whitespace) and sets showAlert
to true
if it’s not empty.
Lines 15–20: The return
statement renders an input field to allow the user to enter text. On entering text, the inputValue
is updated with the entered text.
Line 21: This creates the “Send” button that triggers the handleSendClick
function.
Line 22: This conditionally renders the Alerts
component based on the value of showAlert
.
Let’s have a small quiz to understand the concepts better:
Alert component in React JS
Complete the code below:
const handleSendClick = () => {
//Write your code here
};
return (
<div className="App">
<input
type="text"
placeholder="Enter text..."
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<button onClick={handleSendClick}>Send</button>
{showAlert && <Alerts />}
</div>
);
if (inputValue) {
setShowAlert(true);
}
if (inputValue.trim() !== '') {
setShowAlert(true);
}
if (inputValue.trim() !== '') {
}
setShowAlert(true);
Free Resources