Help with React Try to open the same page in any other browser or incognito tab and you will see that the values didn't persist. Why weren't your answers available in the other browser/incognito tab? ============================================================================== import React from "react"; import { Formik, Form, Field } from "formik"; import { useCookies } from "react-cookie"; const App = () => {   const [cookies, setCookie] = useCookies(["name"]);   const localStorageKey = "email";   return (      {         setTimeout(() => {           setCookie("name", values.name, { path: "/" });           localStorage.setItem(localStorageKey, values.email);           alert(JSON.stringify(values, null, 2));           setSubmitting(false);         }, 400);       }}     >       {({ isSubmitting }) => (                    Name                      Email Address                                   Submit                           )}        ); }; export default App;

Np Ms Office 365/Excel 2016 I Ntermed
1st Edition
ISBN:9781337508841
Author:Carey
Publisher:Carey
Chapter5: Working With Excel Tables, Pivottables, And Pivotcharts
Section: Chapter Questions
Problem 4.8CP
icon
Related questions
Question

Help with React

Try to open the same page in any other browser or incognito tab and you will see that the values didn't persist. Why weren't your answers available in the other browser/incognito tab?

==============================================================================

import React from "react";
import { Formik, Form, Field } from "formik";
import { useCookies } from "react-cookie";

const App = () => {

  const [cookies, setCookie] = useCookies(["name"]);
  const localStorageKey = "email";

  return (
    <Formik
      initialValues={{
        name: cookies.name || "",
        email: localStorage.getItem(localStorageKey) || "",
      }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          setCookie("name", values.name, { path: "/" });
          localStorage.setItem(localStorageKey, values.email);
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}

    >
      {({ isSubmitting }) => (
        <Form>
          <label htmlFor="name">Name</label>
          <Field type="text" name="name" />

          <label htmlFor="email">Email Address</label>
          <Field type="email" name="email" />

          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default App;
Expert Solution
steps

Step by step

Solved in 3 steps

Blurred answer
Knowledge Booster
Elements and Tags
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Similar questions
  • SEE MORE QUESTIONS
Recommended textbooks for you
Np Ms Office 365/Excel 2016 I Ntermed
Np Ms Office 365/Excel 2016 I Ntermed
Computer Science
ISBN:
9781337508841
Author:
Carey
Publisher:
Cengage