Age Calc with NextJs, TailwindCSS and TypeScript

Community feedback

• 

  Alex Paraschiv•70

  @alx29Posted about 1 year ago

  Hi viniciusvalmeida,

  Nice work on this challenge, well done. Here are some few observations: It is not good practice to use getElementById in React for several reasons:

  • Deters from React's declarative approach: React is designed to handle DOM manipulation internally through its reconciliation process. Using getElementById breaks this abstraction and introduces imperative DOM manipulation, which can make code less predictable and more error-prone.
  • Interrupts with React's virtual DOM: React maintains an internal representation of the DOM called the virtual DOM. This virtual DOM is used to efficiently update the actual DOM when changes occur. Using getElementById bypasses this virtual DOM and directly manipulates the actual DOM, making it harder for React to keep track of the DOM state.
  • Hinders component reusability: Components should be self-contained and interact with the DOM through their props and state, not by directly accessing DOM elements using getElementById. This makes components more reusable and maintainable.

  About your question, yes there is a way to avoid those ifs.👌🏻

  const getElement = (id) => document.getElementById(id);
  
  const showError = (input, label, msg) => {
      input.classList.add("border-primary-light-red");
      label.classList.add("text-primary-light-red");
      msg.innerHTML = "This field is required";
      msg.classList.remove("invisible");
  };
  
  const resetErrors = (inputs, labels, msgs) => {
      inputs.forEach((input) => input.classList.remove("border-primary-light-red"));
      labels.forEach((label) => label.classList.remove("text-primary-light-red"));
      msgs.forEach((msg) => msg.classList.add("invisible"));
  };
  
  const checkDateValidity = (day, month, year) => {
      const currentDate = new Date();
      return (
          +year > currentDate.getFullYear() ||
          (+year === currentDate.getFullYear() && +month > currentDate.getMonth() + 1) ||
          (+day > currentDate.getDate() && +year === currentDate.getFullYear() && +month > currentDate.getMonth())
      );
  };
  
  const handleSubmit = (ev) => {
      ev.preventDefault();
  
      const dayInput = getElement("day");
      const monthInput = getElement("month");
      const yearInput = getElement("year");
  
      const dayLabel = getElement("dayLabel");
      const monthLabel = getElement("monthLabel");
      const yearLabel = getElement("yearLabel");
  
      const dayMsg = getElement("dayMsg");
      const monthMsg = getElement("monthMsg");
      const yearMsg = getElement("yearMsg");
  
      const inputs = [dayInput, monthInput, yearInput];
      const labels = [dayLabel, monthLabel, yearLabel];
      const msgs = [dayMsg, monthMsg, yearMsg];
  
      resetErrors(inputs, labels, msgs);
  
      if (!birthDay) {
          showError(dayInput, dayLabel, dayMsg);
          return false;
      }
  
      if (!birthMonth) {
          showError(monthInput, monthLabel, monthMsg);
          return false;
      }
  
      if (!birthYear) {
          showError(yearInput, yearLabel, yearMsg);
          return false;
      }
  
      if (birthMonth in thirtyDayMonths && birthDay === "31") {
          showError(dayInput, dayLabel, dayMsg);
          return false;
      }
  
      if (checkDateValidity(birthDay, birthMonth, birthYear)) {
          showError(yearInput, yearLabel, yearMsg);
          return false;
      }
  
      setDay(birthDay);
      setMonth(birthMonth);
      setYear(birthYear);
  };
  

  This way the code is more readable.

  Marked as helpful

  0

  ---

  

  Vinícius Almeida•70

  @viniciusvalmeidaPosted about 1 year ago

  @alx29 Thank you so much for the comment and tips

  I used the document.getElementById approach because i didn't get any ideas for how to get the element in the html using react and manipulate it.

  You blew my mind!

  I'll improve the code

  Again, so many thanks

  1

  

  Alex Paraschiv•70

  @alx29Posted about 1 year ago

  @viniciusvalmeida you can use useRef hook from react instead of getElementById. Here is an article about useRef: useRef.

  1