<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.14.7/babel.min.js"></script>
<script type="text/babel">
const { useState } = React;
const [input, setInput] = useState('Font aweosme icons');
const isFirstLetterUppercase = input.length > 0 && input[0] === input[0].toUpperCase();
const showAlert = () => {
const message = isFirstLetterUppercase
? 'The first letter is uppercase.'
: 'The first letter is not uppercase.';
<div className='container'>
<h3>React Js Check First Letter Of String Is Uppercase </h3>
onChange={(e) => setInput(e.target.value)}
placeholder="Enter a string"
<button className='check-button' onClick={showAlert}>Check Uppercase</button>
ReactDOM.render(<App />, document.getElementById("app"));
font-family: Arial, sans-serif;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
border: 2px solid #007BFF;
background-color: #007BFF;
transition: background-color 0.3s;
background-color: #0056b3;
/* Darker blue on hover */