REACT - Invalid hook call - WARNING

[nicovtx]

Hello,

I'm trying to add React features (contact form with field check) into my website. Code is working great but got this warning :

---

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.

---

I've try the code already in a blank astro project, no warning generated.

I've list react versions on my astrowind project, same result as the blank one:

---

npm ls react

└─┬ @astrojs/[email protected]
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

---

Do you have any ideas ?? Did you already got those issue ?

This my react feature :

// src/components/Form.jsx
import React, { useState } from 'react';

const Form = ({ inputs, textarea, disclaimer, button = 'Contact us', description = '' }) => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    text: ''
  });

  const [errors, setErrors] = useState({});

  const validateEmail = (email) => {
    const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return re.test(String(email).toLowerCase());
  };

  const validatePhone = (phone) => {
    const reE164 = /^\+?[1-9]\d{1,14}$/;
    const reLocal = /^0\d{9}$/;
    return reE164.test(phone) || reLocal.test(phone);
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const newErrors = {};

    if (!formData.name) {
      newErrors.name = 'Name is required';
    }

    if (!formData.email) {
      newErrors.email = 'Email is required';
    } else if (!validateEmail(formData.email)) {
      newErrors.email = 'Email is not valid';
    }

    if (formData.phone && !validatePhone(formData.phone)) {
      newErrors.phone = 'Phone number is not valid';
    }

    if (!formData.text) {
      newErrors.text = 'Text is required';
    }

    setErrors(newErrors);

    if (Object.keys(newErrors).length === 0) {
      // Form is valid, handle submission
      alert('Form submitted successfully!');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {inputs &&
        inputs.map(
          ({ type = 'text', name, label = '', autocomplete = 'on', placeholder = '' }) =>
            name && (
              <div className="mb-6" key={name}>
                {label && (
                  <label htmlFor={name} className="block text-sm font-medium">
                    {label}
                  </label>
                )}
                <input
                  type={type}
                  name={name}
                  id={name}
                  autocomplete={autocomplete}
                  placeholder={placeholder}
                  className="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
                  value={formData[name] || ''}
                  onChange={handleChange}
                />
                {errors[name] && <p className="text-red-500 text-sm">{errors[name]}</p>}
              </div>
            )
        )}

      {textarea && (
        <div>
          <label htmlFor="textarea" className="block text-sm font-medium">
            {textarea.label}
          </label>
          <textarea
            id="textarea"
            name={textarea.name ? textarea.name : 'message'}
            rows={textarea.rows ? textarea.rows : 4}
            placeholder={textarea.placeholder}
            className="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
            value={formData.text}
            onChange={handleChange}
          />
          {errors.text && <p className="text-red-500 text-sm">{errors.text}</p>}
        </div>
      )}

      {disclaimer && (
        <div className="mt-3 flex items-start">
          <div className="flex mt-0.5">
            <input
              id="disclaimer"
              name="disclaimer"
              type="checkbox"
              className="cursor-pointer mt-1 py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
            />
          </div>
          <div className="ml-3">
            <label htmlFor="disclaimer" className="cursor-pointer select-none text-sm text-gray-600 dark:text-gray-400">
              {disclaimer.label}
            </label>
          </div>
        </div>
      )}

      {button && (
        <div className="mt-10 grid">
          <button type="submit" className="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900">
            {button}
          </button>
        </div>
      )}

      {description && (
        <div className="mt-3 text-center">
          <p className="text-sm text-gray-600 dark:text-gray-400">{description}</p>
        </div>
      )}
    </form>
  );
};

export default Form;

Thanks for your help !!!