How to import Formik? - reactjs

Question

port './App.css';
function App() {
return (
<>
<div className='container'>
</div>
</>
);
}
ooooooo iiiiiii lk;jv

Answer 1

import React from 'react'
import { Field, Form, Formik} from 'formik';
function Add() {
return (
<Formik
initialValues={{ email: '', firstName: '', lastName: '', myPassword: '' }}
onSubmit={(values) => {
console.log(values)
}}
>
<Form>
<Field type="email" name="email" placeholder="Email" />
<Field name="lastName" placeholder="Doe" />
<Field name="myPassword" placeholder="Password" type="password" />
<button type="submit">Submit</button>
</Form>
</Formik>
)
}
export default Add

Answer 2

https://codesandbox.io/s/elastic-hill-cmbz1?from-embed=&file=/src/Carousel.css:0-429
// App.js //
import Carousel, { CarouselItem } from "./Carousel"; import gtr1
from './assets/gtr.jpg'
export default function App() { return (
<div className="image">
<img src={gtr1}></img>
<div className="txt">
<h1> HeyyyyY!</h1>
</div>
</div>
</CarouselItem>
</Carousel>
</div> ); }
// Carousel.js //
import React, { useEffect, useState } from "react"; import {
useSwipeable } from "react-swipeable";
import "./Carousel.css";
export const CarouselItem = ({ children, width }) => { return (
<div className="carousel-item" style={{ width: width }}>
{children}
); };
const Carousel = ({ children }) => { const [activeIndex,
setActiveIndex] = useState(0); const [paused, setPaused] =
useState(false);
const updateIndex = (newIndex) => {
if (newIndex < 0) {
newIndex = React.Children.count(children) - 1;
} else if (newIndex >= React.Children.count(children)) {
newIndex = 0;
}
setActiveIndex(newIndex); };
useEffect(() => {
const interval = setInterval(() => {
if (!paused) {
updateIndex(activeIndex + 1);
}
}, 3000);
return () => {
if (interval) {
clearInterval(interval);
}
}; });
const handlers = useSwipeable({
onSwipedLeft: () => updateIndex(activeIndex + 1),
onSwipedRight: () => updateIndex(activeIndex - 1) });
return (
<div
{...handlers}
className="carousel"
onMouseEnter={() => setPaused(true)}
onMouseLeave={() => setPaused(false)}
>
<div
className="inner"
style={{ transform: translateX(-${activeIndex * 100}%) }}
>
{React.Children.map(children, (child, index) => {
return React.cloneElement(child, { width: "100%" });
})}
<button
onClick={() => {
updateIndex(activeIndex - 1);
}}
>
Prev
{React.Children.map(children, (child, index) => {
return (
<button
className={${index === activeIndex ? "active" : ""}}
onClick={() => {
updateIndex(index);
}}
>
{index + 1}
);
})}
<button
onClick={() => {
updateIndex(activeIndex + 1);
}}
>
Next
); };
export default Carousel;
// Carousel.css //
*{ margin: 0; } .carousel {
overflow: hidden; }
.inner {
white-space: nowrap;
transition: transform 1s; }
.carousel-item {
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff; }
.indicators {
display: flex;
justify-content: center; }
.indicators > button {
margin: 5px; }
.indicators > button.active {
background-color: green;
color: #fff; }
.image img{
width: 100%;
height: 700px;
position: relative;
display: flex;
align-items: center;
text-align: center;
justify-content: center; } .image{
position: relative;
display: flex;
} .txt{
position: absolute;
display: flex;
justify-content: center;
text-align: center;
width: 100%;
height: 700px;
align-items: center;
} .txt h1{
font-size: 30px;
color: aqua;
margin-bottom: 200px; }