Problemy z użyciem useEffect

Cześć, mam takie dwa komponenty. TaskContent to komponent rodzica a QuestionOpen dziecka. Problem jest w komponencie dziecka, gdy chce wypisać wartość textValue do konsoli wypisuje mi pustego stringa. Ten useEffect odpalany jest gdy w komponencie rodzica klikniemy buttona i bedziemy chcieli wyslac dane. Rozumiem ze zmienia się stan rodzica i powoduje to re renderowanie dziecka, co za tym idzie, stan textValue jest pustym stringiem. Ale czy jest jakiś sposób,żeby ten problem rozwiązać jakoś, przechwycić jakoś ten stan dziecka przed re renderowaniem i trzymać go nawet po re renderowaniu.Dodam że nie chce trzymać stanu komponentu QuestionOpen w komponencie TaskContent

function TaskContent({ contents, idTask }) {
  const [sentData, setSentData] = useState(false);
  const [finalData, setFinalData] = useState([]);

  function handleSubmit(e) {
    e.preventDefault();
    setSentData(true);
  }

  if (!contents) {
    return <Loader />;
  }

  return (
    <>
      <div>
        {contents.map((cont) => {
          if (cont.typ === "OTWARTE")
            return (
              <OpenQuestion
                key={uuidv4()}
                element={cont}
                sentData={sentData}
                setFinalData={setFinalData}
                setSentData={setSentData}
              />
            );
          if (cont.typ === "ZAMKNIETE") {
            return <CloseQuestion key={uuidv4()} element={cont} />;
          }
          if (cont.typ === "PRAWDA_FALSZ") {
            return (
              <TrueFalseQuestion
                key={uuidv4()}
                element={cont}
                sentData={sentData}
                setFinalData={setFinalData}
                setSentData={setSentData}
              />
            );
          }
          if (cont.typ === "PLIK") {
            return <FileQuestion key={uuidv4()} element={cont} />;
          }
        })}
      </div>
      <button
        className="translate-x-[650px] translate-y-[80px] bg-blue px-6 py-2 text-white rounded-lg"
        onClick={handleSubmit}
      >
        Wyślij zadania
      </button>
    </>
  );
}

function OpenQuestion({ element, sentData, setFinalData, setSentData }) {
  const [textValue, setTextValue] = useState("");

  useEffect(
    function () {
      const sentToParentComponent = function () {
        if (!sentData) return;
        console.log(textValue);
      };

      sentToParentComponent();
    },
    [sentData]
  );
  return (
    <div>
      <div className="mt-10 border-t-[1px] pt-3 border-gray border-opacity-20">
        <h2 className="text-lg text-green py-5">Pytanie: </h2>
        <p className="mt-3 text-gray opacity-70">{element.pytanie}</p>
        <div className="mt-3">
          <h3 className="text-blue">Odpowiedzi</h3>
          <form className="mt-5 flex flex-col gap-y-5">
            <textarea
              className="w-[800px] border-[1px] border-blue rounded-lg h-[250px] pt-5 pl-2 focus:outline-none"
              value={textValue}
              onChange={(e) => setTextValue(e.target.value)}
            ></textarea>
            <div className="flex justify-between">
              <button className="w-[80px]">Wyślij</button>
              <p>0/{element.punkty}</p>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

szym68on napisał(a):

if (cont.typ === "OTWARTE")
  return (
    <OpenQuestion
        key={uuidv4()}
        element={cont}
        sentData={sentData}
        setFinalData={setFinalData}
        setSentData={setSentData}
     />
   );

Zgaduję, że funkcja uuidv4 za każdym razem zwraca losowy ciąg znaków? Jeśli tak to React przez zmianę atrybutu key "gubi" wartość z useState.

Wartość key powinna być stała jeśli wciąż to jest ten sam komponent i jego miejsce w DOM nie uległo zmianie.

Xarviel napisał(a):

szym68on napisał(a):

if (cont.typ === "OTWARTE")
  return (
    <OpenQuestion
        key={uuidv4()}
        element={cont}
        sentData={sentData}
        setFinalData={setFinalData}
        setSentData={setSentData}
     />
   );

Zgaduję, że funkcja uuidv4 za każdym razem zwraca losowy ciąg znaków? Jeśli tak to React przez zmianę atrybutu key "gubi" wartość z useState.

Wartość key powinna być stała jeśli wciąż to jest ten sam komponent i jego miejsce w DOM nie uległo zmianie.

Dzięki wielkie, siedziałem cały dzień nad tym i w całkowicie innym miejscu szukałem