JSFiddle - React, Tailwind, and code Playground

by Allie Yu

JavaScript

// import React from "react";
import React, { useState } from "react";

import WalmartLogo from "../images/logo.png";
import Cookies from "/electrode-cookies";
import "../styles/ad-preferences.styl";

const SavedComponent = () => {
    return (
        <div>
            <nav>
                <a href=""><img className="img-fluid" src={WalmartLogo} /></a>
            </nav>
            <section className="hero-bg">
                <div className="saved-hero-main">
                    <div className="hero-content">
                        <h4 className="h4">Your preference has been saved.</h4>
                        <div className="footer-container">
                            <div className="footer-inner">
                                <a href="">Back to Walmart.com</a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    );
};

/*eslint-disable max-len*/
/*eslint-disable no-invalid-this*/
export default function AdPreferences() {
    const [cookieValue, setCookieValue] = useState("0");
    const [isSubmitted, setIsSubmitted] = useState("false");

    const handleValueChange = event => {
        setCookieValue({
            cookieValue: event.target.value
        });
    }

    const formSubmit = event => {
        event.preventDefault();
        if (this.state.cookieValue === "1") {
            Cookies.set("apo", "1", {expires: 315360000});
        } else {
            Cookies.expire("apo");
        }
        setIsSubmitted({
            isSubmitted: true
        });
    }

        const getIsSubmitted = this.state.isSubmitted;
        if (getIsSubmitted) {
            return (
                <SavedComponent />
            );
        }
        return (
        <div className="ad-preferences">
            <nav>
                <a href=""><img className="img-fluid" src={WalmartLogo} /></a>
            </nav>
            <section className="hero-bg">
        ...