Почему состояния моей платформы и packageType не обновляются правильно? ⇐ Javascript

[Anonymous]

У меня есть компоненты Index, LandingButtons, SelectPackages. Index имеет состояния platform и packageType, которые задают начальные состояния компонента SelectPackages. Я передаю функцию компоненту LandingButtons для обновления этих состояний. Они обновляются, но по какой-то причине не установлены в компоненте SelectPackages.
Index.jsx

Код: Выделить всё

import SelectPackages from "../components/structure/landing_page/SelectPackages.jsx";
import LandingHeader from "../components/structure/landing_page/header/LandingHeader.jsx";
import HowItWorks from "../components/structure/landing_page/HowItWorks.jsx";
import FAQ from "../components/structure/landing_page/FAQ.jsx";
import LandingReviews from "../components/structure/landing_page/LandingReviews.jsx";
import LandingButtons from "../components/structure/landing_page/LandingButtons.jsx";
import Features from "../components/structure/landing_page/Features.jsx";
import {useState} from "react";

export default function Index() {
const [platform, setPlatform] = useState("instagram")
const [packageType, setPackageType] = useState("discussions")
return (


 {
console.log("Selected platform:", newPlatform, "Selected package type:", newPackageType);
setPlatform(newPlatform);
setPackageType(newPackageType);
}}/>







);
}

LandingButtons.jsx
< div class="snippet">

Код: Выделить всё

import twocheckout1 from "../../../assets/img/landing/twocheckout1.png";

const buttons = [
{ text: "Instagram discussions", platform: "instagram", packageType: "discussions" },
{ text: "Instagram comments", platform: "instagram", packageType: "comments" },
{ text: "Instagram discussions + comments", platform: "instagram", packageType: "discussions+comments" },
{ text: "TikTok discussions", platform: "tiktok", packageType: "discussions" },
{ text: "TikTok comments", platform: "tiktok", packageType: "comments" },
{ text: "TikTok discussions + comments", platform: "tiktok", packageType: "discussions+comments" },
];

export default function LandingButtons({onPackageSelected}) {
return (



{buttons.map((button, index) => (
 onPackageSelected(button.platform, button.packageType)}
>
{button.text}

))}

[img]{twocheckout1} className=[/img]


);
}

SelectPackages.jsx

Код: Выделить всё

import {useEffect, useState} from "react";
import DiscussionsPackages from "../../packages/DiscussionsPackages.jsx";
import CommentsPackages from "../../packages/CommentsPackages.jsx";
import DiscussionsCommentsPackages from "../../packages/DiscussionsCommentsPackages.jsx";
import {useNavigate} from "react-router";
import {getPrices} from "../../../services/infoRequests.js";

export default function SelectPackages({initialPlatform, initialPackageType}) {
const navigate = useNavigate();
const [platform, setPlatform] = useState(initialPlatform);
const [packageType, setPackageType] = useState(initialPackageType);
const [selectedPackage, setSelectedPackage] = useState(null);
const [commentsPackages, setCommentsPackages] = useState({});
const [discussionsPrices, setDiscussionsPrices] = useState({});
const [slidersLimits, setSlidersLimits] = useState({});
console.log("1 platform:", platform);  //shows initial "instagram" value
console.log("1 package type:", packageType);
console.log("2 platform:", initialPlatform); //shows updated "tiktok" value
console.log("2 package type:", initialPackageType);
useEffect(() => {
getPrices().then((res) => {
setCommentsPackages(res.data.commentsPackages);
setDiscussionsPrices(res.data.discussionsPrices);
setSlidersLimits(res.data.discussionsSlidersLimits);
});
}, [platform, packageType]);

function handlePackageSelected(_selectedPackage) {
setSelectedPackage(_selectedPackage);
}

return (

Packages

 setPlatform("instagram")}>
Instagram

 setPlatform("tiktok")}>
TikTok


 setPackageType("discussions")}>
Discussions

 setPackageType("comments")}>
Comments

 setPackageType("discussions+comments")}>
Discussions + comments


{
packageType === "discussions" ?
 :
packageType === "comments" ?
 :

}


)
}

Подробнее здесь: https://stackoverflow.com/questions/793 ... -correctly