Après 2 jours de luttes acharnées, j'ai décidé de poster ici

Mon souci est le suivant :

Dans le cadre d'un projet, je souhaite générer un nombre de champs de saisie égal à la taille d'un tableau. Exemple :

function App() {
  const [UseState, setUseState] = useState("");
  const array = [0, 1, 2];

  const HandleAdding = (e) => {
    e.preventDefault;
    const returnJson = { UseState };
    //rest of the code
  };

  return (
    <div>
      {array.map(() => (
        <form onSubmit={HandleAdding}>
          <input value={UseState} onChange={(e) => setUseState(e.target.value)} />
        </form>
      ))}
    </div>
  );
}

On peut déjà connaître le problème, lors de l'insertion d'une valeur sur un champ, cette même valeur sera insérée sur tous les autres champs qui partagent le même UseState comme valeur. Pour encore plus de concret, voici une illustration du problème sur CodeSandBox :

https://codesandbox.io/s/adoring-rgb-n0bdk?file=/src/App.js

Essayez donc de remplir un champ et vous remarquerez le problème. J'ai essayé beaucoup de choses pour résoudre mon problème comme ceci:

https://codesandbox.io/s/blissful-rain-mcol2?file=/src/App.js(J'essaye d'adapter le code afin de résoudre mon problème).

Je ne mets rien de plus pour éviter que le sujet ne devienne trop long. Alors, auriez-vous une solution pour résoudre le problème ? Pour ma part je suis à court d'idées, et encore débutant sur React. Merci d'avance! ^^

Salut, je t'invite à découvrir React Hook Form (https://react-hook-form.com/) ou Formik (https://formik.org/) qui permettent entre aures de travailler avec des tableaux.

useFieldArray pour React Hook Form (https://react-hook-form.com/api/usefieldarray)
FieldArray pour Formik (https://formik.org/docs/api/fieldarray)

Si tu veux le faire sans lib:

const SIZE = 666

function App() {
  const [fields, setFields] = useState(Array.from(Array(SIZE)));

  const handleFieldChange= (value, index) => {
    const nextFields = [...fields]
    nextFields[index] = value
    setFields(nextFields)
  };

  return (
    <div>
      {fields.map((value, index) => (
        <form onSubmit={HandleAdding} key={`input-${index}`}>
          <input value={value} onChange={(e) => handleFieldChange(e.target.value, index)} />
        </form>
      ))}
    </div>
  );
}

Perso je le ferais avec react-hook-form, ça trigger moins de rerender pour rien.