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>
);
}