<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
const { useState } = React;
const [time, setTime] = useState("19:30"); // 24 hour format time string
const formattedTime = () => {
const [hours, minutes] = time.split(":");
const timeObj = new Date();
timeObj.setMinutes(minutes);
const ampm = timeObj.getHours() >= 12 ? "PM" : "AM";
let hours12 = timeObj.getHours() % 12;
hours12 = hours12 ? hours12 : 12; // convert 0 to 12
return `${hours12}:${minutes} ${ampm}`;
<div className="container">
React JS Convert Time 24 hours to 12 hour format
<p className="time">24 hours format: {time}</p>
<p className="formatted-time">12 hours format: {formattedTime()}</p>
ReactDOM.render(<App />, document.getElementById("app"));
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12),
0 2px 4px 0 rgba(0, 0, 0, 0.24);