Witam, mam taki kod komponentu rodzica. Komponent ten przekazuje komponentowi <Outlet/> wartość nameMaterial. Przy wywołaniu console log przed przekazaniem wartość jest poprawna. W React Dev Tools rowniez pokauzje ze komponent Outlet otrzymal poprawna wartosc nameMaterials. Przy wywolaniu console log w komponencie Outlet jednak wartosc nameMaterial pokazuje ze jest undefined. Czy ktos wie co moze byc powodem czegos takiego?
function Materials() {
const { data, isLoading, error } = useApi("/api/przedmiot/all");
const load = useHideContainer(false);
const [nameMaterials, setNameMaterials] = useNameMaterials("");
return (
<MaterialsPage>
<UserInfo />
<InfoTab title={`${nameMaterials}`} />
<TitleMaterials />
{console.log(nameMaterials)}
<Outlet title={`${nameMaterials}`} />
{load && (
<MaterialsContainer>
{isLoading && <Loader />}
{error ? (
<Error />
) : (
data?._embedded.przedmiotModelList.map((obj) => (
<MaterialItem
name={obj.nazwa}
key={obj.id}
setNameMaterials={setNameMaterials}
/>
))
)}
</MaterialsContainer>
)}
</MaterialsPage>
);
}
Poniżej załączam kod komponentu Outlet :
function SingleMaterial({ title }) {
const [displayDescription, setDisplayDescription] = useState(false);
console.log(title);
return (
<div className="w-[90%] mx-auto mt-10">
<MaterialSingleDescription
setDisplayDescription={setDisplayDescription}
/>
{displayDescription ? (
<DescriptionSubject setDisplayDescription={setDisplayDescription} />
) : (
<>
<MaterialSingleItem num={1} />
<MaterialSingleItem num={2} />
<MaterialSingleItem num={3} />
<MaterialSingleItem num={4} />
<MaterialSingleItem num={5} />
<MaterialSingleItem num={6} />
<MaterialSingleItem num={7} />
</>
)}
</div>
);
}