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
