Counting problem with character counter for a textarea form field

[StephanBergmann]

Hello together,

we added character counters to the textarea form fields on our edit and addTrip pages. Actually we have the problem on our edit page that we have already text in our textarea and the counter doesn´t work on initially loading the page. We know that the onChange method only works if some changes happen in the textarea but we have no idea how we can subtract the already existing characters on the edit page from the counter on initially loading the page.

Components/TripForm/index.js:

import {
StyledButtonPostionAddTrip,
StyledDIVAddTrip,
StyledFieldsetAddTrip,
StyledFormAddTrip,
StyledInputAddTrip,
StyledPNoteAddTrip,
StyledTextareaAddTrip,
StyledlabelAddTrip,
} from "./TripForm.styled";

import ConfirmationMessage from "../ConfirmationMessage";
import { useRouter } from "next/router";
import { useState } from "react";

export default function TripForm() {
const [Letters, setLetters] = useState(150);
const router = useRouter();

async function handleSubmit(event) {
event.preventDefault();

const formData = new FormData(event.target);
const tripData = Object.fromEntries(formData);
const response = await fetch("/api/trips", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(tripData),
});
if (!response.ok) {
  console.error(response.status);
  return;
}

router.push("/confirmation");

}

function handleCountLetters(event) {
setLetters(150 - parseInt(event.target.value.length, 10));
}

return (




Title (max. 30 characters)*

    <StyledDIVAddTrip>
      <StyledlabelAddTrip htmlFor="startDate">
        Starting date (dd/mm/yyyy)*
      </StyledlabelAddTrip>
      <StyledInputAddTrip
        id="startDate"
        name="startDate"
        type="date"
        required
      />
    </StyledDIVAddTrip>

    <StyledDIVAddTrip>
      <StyledlabelAddTrip htmlFor="endDate">
        Ending date (dd/mm/yyyy)*
      </StyledlabelAddTrip>
      <StyledInputAddTrip
        id="endDate"
        name="endDate"
        type="date"
        required
      />
    </StyledDIVAddTrip>

    <StyledDIVAddTrip>
      <StyledlabelAddTrip htmlFor="city">
        City (max. 30 characters)*
      </StyledlabelAddTrip>
      <StyledInputAddTrip
        id="city"
        name="city"
        type="text"
        maxLength="30"
        required
      />
    </StyledDIVAddTrip>

    <StyledDIVAddTrip>
      <StyledlabelAddTrip htmlFor="country">
        Country (max. 30 characters)*
      </StyledlabelAddTrip>
      <StyledInputAddTrip
        id="country"
        name="country"
        type="text"
        maxLength="30"
        required
      />
    </StyledDIVAddTrip>

    <StyledDIVAddTrip>
      <StyledlabelAddTrip htmlFor="image">Image (URL)*</StyledlabelAddTrip>
      <StyledInputAddTrip
        id="image"
        name="image"
        type="text"
        placeholder="For example www.my-image.com"
        required
      />
    </StyledDIVAddTrip>

    <StyledDIVAddTrip>
      <StyledlabelAddTrip htmlFor="description">
        Description 150/<span>{Letters}</span> characters left*
      </StyledlabelAddTrip>
      <StyledTextareaAddTrip
        rows="8"
        cols="30"
        maxLength="150"
        id="description"
        name="description"
        type="text"
        required
        placeholder="Enter your description"
        onChange={handleCountLetters}
      ></StyledTextareaAddTrip>
    </StyledDIVAddTrip>
    <StyledButtonPostionAddTrip>
      <button type="submit">+ Add Trip</button>
      <ConfirmationMessage button={"Cancel"} />
    </StyledButtonPostionAddTrip>
  </StyledFieldsetAddTrip>
  <StyledPNoteAddTrip>* required form field</StyledPNoteAddTrip>
</StyledFormAddTrip>

);
}

Maybe you have an idea.

Thank you in advance.

PS: I am sorry, actually i can´t create a pull request because a pull request about an another user story is still in progress.

[StephanBergmann]

We found the answer, we used the trips.description.length as the initial state and subtracted it from 150.

export default function EditTrip() {
  const { mutate } = useSWR("/api/trips");
  const router = useRouter();
  const { id } = router.query;
  const { data: trips, isLoading } = useSWR(
    id ? `/api/trips/${id}` : null,
    fetcher
  );
  const [Letters, setLetters] = useState(150 - trips.description.length);
  if (!trips || isLoading) {
    return <h2>is Loading...</h2>;
  }