title: Why is my time displaying in a weird format?
body: <p>Hi i have a react application. and I have a time column in my cards rendered,but the format is something weird .I dont understand. &quot;Time : 2000-01-01T21:51:00.373Z&quot; ....Like is there any way I can I can change this listed time to just a normal time.
  Here is the code
  Reservation Card</p>
  <pre><code>function ReservationCard({ reservation, handleCancel, onUpdateReservation }) {
    const { name, date, time, num, contact, occasion } = reservation;
    const [isEditing, setIsEditing] = useState(false);
    const handleReservationUpdate = (updatedReservation) =&gt; {
      setIsEditing(false);
      onUpdateReservation(updatedReservation);
    };
  
    function handleDeleteClick() {
      fetch(`/reservations/${reservation.id}`, {
        method: &quot;DELETE&quot;,
      });
      handleCancel(reservation.id);
    }
  
    return (
      &lt;&gt;
        {isEditing ? (
          &lt;Box m={4} sx={{ width: 500 }}&gt;
            &lt;div className=&quot;overlay2&quot;&gt;
            &lt;EditReservationForm
              reservation={reservation}
              onUpdateReservation={handleReservationUpdate}
            /&gt;
            &lt;/div&gt;
          &lt;/Box&gt;
        ) : (
          &lt;&gt;
            &lt;Box m={4} sx={{ width: 500 }}&gt;
              &lt;Card width={5}&gt;
                &lt;CardContent&gt;
                  &lt;Typography variant=&quot;h5&quot; component=&quot;div&quot;&gt;
                    {reservation.restaurant.name}
                  &lt;/Typography&gt;
                  &lt;br /&gt;
                  &lt;Typography sx={{ mb: 1.5 }} color=&quot;text.secondary&quot;&gt;
                    Guest Details
                  &lt;/Typography&gt;
                  &lt;Typography variant=&quot;h6&quot; component=&quot;div&quot;&gt;
                    {name}
                  &lt;/Typography&gt;
                  &lt;Typography variant=&quot;h6&quot;&gt;{contact}&lt;/Typography&gt;
                  &lt;Typography variant=&quot;h6&quot;&gt;Date:{date}&lt;/Typography&gt;
                  &lt;Typography variant=&quot;h6&quot;&gt;Time : {time}&lt;/Typography&gt;
                  &lt;Typography variant=&quot;h6&quot;&gt;Guests : {num}&lt;/Typography&gt;
                  &lt;Typography variant=&quot;h6&quot;&gt;Occasion:{occasion}&lt;/Typography&gt;
                &lt;/CardContent&gt;
                &lt;CardActions&gt;
                  &lt;Button onClick={() =&gt; setIsEditing((isEditing) =&gt; !isEditing)}&gt;
                    {&quot; &quot;}
                    Modify Booking
                  &lt;/Button&gt;
  
                  &lt;Button onClick={handleDeleteClick}&gt;Cancel Booking&lt;/Button&gt;
                &lt;/CardActions&gt;
              &lt;/Card&gt;
            &lt;/Box&gt;
          &lt;/&gt;
        )}
      &lt;/&gt;
    );
  }
  export default ReservationCard;
  
  </code></pre>
  <p>I can share the reservation form as well  if the problem is in that component??</p>