I am trying to make a set of questions through multiple pages, so I need the selected answer from page 1 and page 2 to be passed to page 3 because page 3 is like the confirmation page which will show all the selected answer from the past 2 pages.
The interface is successfully shown, well, easy but it seems like there is no data passed at all, oh, and the types of questions are radio and checkbox, so it's kinda hard for me because these 2 types are something new for me (if textarea or normal input, is easy).
This is the mainpage.jsx
// MainForm.jsx
import React, { Component } from 'react';
import AircondQuantity from './AircondQuantity';
import ServicePackage from './ServicePackage';
import Confirmation from './Confirmation';
import Success from './Success';
class MainForm extends Component {
state = {
step: 1,
oneAircond: ''
}
nextStep = () => {
const { step } = this.state
this.setState({
step : step + 1
})
}
prevStep = () => {
const { step } = this.state
this.setState({
step : step - 1
})
}
handleChange = input => event => {
this.setState({ [input] : event.target.value })
}
render(){
const {step} = this.state;
const { oneAircond } = this.state;
const values = { oneAircond };
switch(step) {
case 1:
return <AircondQuantity
nextStep={this.nextStep}
handleChange = {this.handleChange}
values={values}
/>
case 2:
return <ServicePackage
nextStep={this.nextStep}
prevStep={this.prevStep}
handleChange = {this.handleChange}
values={values}
/>
case 3:
return <Confirmation
nextStep={this.nextStep}
prevStep={this.prevStep}
values={values}
/>
case 4:
return <Success />
}
}
}
export default MainForm;
this is the first page, AircondQuantity.jsx
// AircondQuantity.jsx
import React, { Component } from 'react';
import { Form, Button, FormRadio, Radio } from 'semantic-ui-react';
class AircondQuantity extends Component{
saveAndContinue = (e) => {
e.preventDefault()
this.props.nextStep()
}
render(){
const { values } = this.props;
return(
<Form >
<h1 className="ui centered"> How many aircond units do you wish to service? </h1>
<Form.Field>
<Radio
label='1'
name='oneAircond'
value='oneAircond'
//checked={this.state.value === this.state.value}
onChange={this.props.handleChange('oneAircond')}
defaultValue={values.oneAircond}
/>
</Form.Field>
<Button onClick={this.saveAndContinue}> Next </Button>
</Form>
)
}
}
export default AircondQuantity;
this is the next page, ServicePackage.jsx
// ServicePackage.jsx
import React, { Component } from 'react';
import { Form, Button, Checkbox } from 'semantic-ui-react';
import { throws } from 'assert';
class ServicePackage extends Component{
saveAndContinue = (e) => {
e.preventDefault();
this.props.nextStep();
}
back = (e) => {
e.preventDefault();
this.props.prevStep();
}
render(){
const { values } = this.props
return(
<Form color='blue' >
<h1 className="ui centered"> Choose your package </h1>
<Form.Field>
<Checkbox
label={<label> Chemical Cleaning </label>} />
</Form.Field>
<Form.Field>
<Checkbox
label={<label> Deep Cleaning </label>} />
</Form.Field>
<Button onClick={this.back}> Previous </Button>
<Button onClick={this.saveAndContinue}> Next </Button>
</Form>
)
}
}
export default ServicePackage;
this is the confirmation.jsx page, the page that will show all the selected options
// Confirmation.jsx
import React, { Component } from 'react';
import { Button, List } from 'semantic-ui-react';
import AircondQuantity from './AircondQuantity';
class Confirmation extends Component{
saveAndContinue = (e) => {
e.preventDefault();
this.props.nextStep();
}
back = (e) => {
e.preventDefault();
this.props.prevStep();
}
render(){
const {values: { oneAircond }} = this.props;
return(
<div>
<h1 className="ui centered"> Confirm your Details </h1>
<p> Click Confirm if the following details have been correctly entered </p>
<List>
<List.Item>
<List.Content> Aircond Quantity: {oneAircond}</List.Content>
</List.Item>
</List>
<Button onClick={this.back}>Back</Button>
<Button onClick={this.saveAndContinue}>Confirm</Button>
</div>
)
}
}
export default Confirmation;
I am very new in using React and I know that I have some mistakes in transferring values or variables but I can't detect it, coz I am a newbie, so em, can you help me? thank you.
This doesn't look right to me:
onChange={this.props.handleChange('oneAircond')}
Firstly, it's going to be called instantly, before onChange is actually called, to fix that do this:
onChange={() => this.props.handleChange('oneAircond')}
However you'll also need to pass the change event from the radio button, try this:
onChange={(event) => this.props.handleChange('oneAircond')(event)}
The handleChange function below is a function that returns another function, the first one taking the 'oneAircond' string (input) and returning a function that is expecting the event from the radio button to be passed which is what you're missing
handleChange = input => event => {
this.setState({ [input] : event.target.value })
}
Ok, first i convert solution into hooks:
// MainForm.jsx
import React, { Component, useState, useEffect } from 'react';
import AircondQuantity from './AircondQuantity';
import ServicePackage from './ServicePackage';
import Confirmation from './Confirmation';
// import Success from './Success';
let MainForm = (props) => {
const [step, setStep] = useState(1)
const [input, setInput] = useState([])
const [oneAircond, setoneAircond] = useState('')
const nextStep = () => {
setStep(step + 1)
}
const prevStep = () => {
setStep(step - 1)
}
const handleChange = input => event => {
setInput({ [input] : event.target.value})
console.log(input)
}
const values = { oneAircond };
return(
<React.Fragment>
{(() => {
switch(step) {
case 1:
return <AircondQuantity
nextStep={nextStep}
handleChange = {handleChange}
values={values}
/>
case 2:
return <ServicePackage
nextStep={nextStep}
prevStep={prevStep}
handleChange = {handleChange}
values={values}
/>
case 3:
return <Confirmation
nextStep={nextStep}
prevStep={prevStep}
values={values}
/>
case 4:
// return <Success />
}
})()}
</React.Fragment>
)
}
export default MainForm;
Next I transform AirCondQuantity.jsx, and create new component Radio.jsx, which holds Radio structure (it is a component into which we inject data directly)
So here is:
// AircondQuantity.jsx
import React, { Component, useState } from 'react';
import { Form, Button, FormRadio, } from 'semantic-ui-react';
import Radio from './Radio';
let AircondQuantity = (props) => {
const [radio, setRadio] = useState();
const radioSelect = (name, e) => {
localStorage.setItem('FirstStep', name);
setRadio({ selectedRadio: name })
console.log(radio)
}
const saveAndContinue = (e) =>{
e.preventDefault()
props.nextStep()
}
return(
<Form >
<h1 className="ui centered"> How many aircond units do you wish to service? </h1>
<Form.Field>
<Radio
handleRadioSelect={radioSelect}
selectedRadio={radio}
name ="oneAircond"/>
<Radio
handleRadioSelect={radioSelect}
selectedRadio={radio}
name ="twoAircond"/>
</Form.Field>
<Button onClick={saveAndContinue}> Next </Button>
</Form>
)
}
export default AircondQuantity;
I added function, which setting the item to LocalStorage + send it in radio state
Additional here is a Radio component:
import React, { Component, useState } from 'react';
const Radio = (props) => {
return (
<div className = "RadioButton"
onClick={() => props.handleRadioSelect(props.name)} >
<div>
<input id={props.id} value={props.value} type="radio" checked={props.selectedRadio === props.name} />
{props.name}
</div>
</div>
);
}
export default Radio;
The solution works, despite one thing - it doesn't check the box, I have no idea how to fix it.
Related
Maybe the question is a little bit confusing because I'm confused. The problem I have listed categories in the database I fetched it and create a post. Now I'm trying to edit the post. The categories are in checkbox format if check it adds the setCategories state if uncheck it will remove from the state. I have fetched the post and saved categories for that particular post. I've shown them checked. Now I'm trying to change the categories I've added. I'm successful to add more but cannot remove it as well am unable to uncheck the checkbox. Please check this code...
I'm highlighted the onChange part with dashes
here is code
import React, { useEffect, useState } from 'react';
import { Alert, Button, Card, Container, Form } from 'react-bootstrap';
import ReactMarkdown from 'react-markdown';
import { useDispatch, useSelector } from 'react-redux';
import { toast, ToastContainer } from 'react-toastify';
import { listCategory } from '../actions/categoryActions';
import { listPostDetails, updatePost } from '../actions/postActions';
const EditPost = ({ history, match }) => {
const postId = match.params.id;
const [categories, setCategories] = useState([]);
const dispatch = useDispatch();
const userLogin = useSelector((state) => state.userLogin);
const { userInfo } = userLogin;
const categoryList = useSelector((state) => state.categoryList);
const { categories: cateList } = categoryList;
useEffect(() => {
if (!userInfo) {
history.push('/login');
}
if (!post || post._id !== postId) {
dispatch(listPostDetails(postId));
} else {
setCategories(post.categories);
console.log(categories);
}
dispatch(listCategory());
}, [dispatch, history, userInfo, post, postId, categories]);
const resetHandler = () => {
setTitle('');
setImg('');
setCategories('');
setDesc('');
};
const submitHandler = (e) => {
e.preventDefault();
dispatch(updatePost(postId, title, desc, img, categories));
resetHandler();
history.push('/my_posts');
};
return (
<div className=" createPost mt-4 py-4">
<ToastContainer />
<Container>
<h2>EDIT POST</h2>
<Form onSubmit={submitHandler}>
<Form.Group controlId="category" className="mb-2">
<Form.Label>Select Categories</Form.Label>
<br />
{cateList?.map((cate) => (
<Form.Check
inline
key={cate._id}
type="checkbox"
label={cate.name}
checked={categories.includes(cate.name)}
------------------------------------------------------------------------------------------
onChange={(e) => {
if (e.target.checked) {
setCategories([categories.push(cate.name)]);
} else {
setCategories(
categories?.filter((cat) => cat !== cate.name)
);
}
}}
-------------------------------------------------------------------------------------------
/>
))}
</Form.Group>
<Button
type="submit"
variant="success"
style={{ letterSpacing: '2px', fontWeight: 'bold' }}>
UPDATE
</Button>
</Form>
</Container>
</div>
);
};
export default EditPost;
I think the problem is on useEffect method you are console.log(categories) it keeps on refreshing the state and not allowing you to add or remove items. first remove the console.log(categories) and also categories dependencies from useEffect and use this setCategories([...categories, cate.name]); instead of this setCategories([categories.push(cate.name)]);. You shouldn't change categories directly
You shouldn't change categories directly. So, instead of
setCategories([categories.push(cate.name)]);
try
setCategories([...categories, cate.name]);
I am working on a reusable filter component that dynamically creates a list of checkboxes within a dropdown, and includes an "all selected" toggle (similar to google flights). Everything is working as desired, but there is huge latency when clicking a checkbox, and especially when using the select all toggle. It is very similar to the issue described here (almost identical even), but I have tried my best to implement the solutions described therein to no avail. I tried applying useCallback on all the functions that are passed, and gotten rid of all warnings from 'why-did-you-render' but none of it resolved the issue. I'm hoping somebody here can help tell me what I'm missing. See relevant code snippets below. Thanks!
This is the parent component that manages the data:
import React, { useState, useEffect } from "react";
import ControlPanel from '../Components/ControlPanel';
const TopLevelComponent = () => {
const [data, setData] = useState();
const [selectedFilters, setSelectedFilters] = useState([]);
useEffect(() => {
getData();
}, [])
const getData = async() => {
...
}
return (
<div>
<ControlPanel
filterOptions={ data?.filterSet }
filterSelections={ selectedFilters }
filterHandler={ setSelectedFilters }
/>
{ /* other stuff irrelevant here */ }
</div>
)
}
export default TopLevelComponent;
This is a reusable control panel component that holds the filters and other settings:
import React from "react";
import { Filter } from './Inputs';
const ControlPanel = ({ filterOptions, filterSelections, filterHandler }) => {
return (
<>
{ /* other controls not relevant here */ }
<div className="control-panel__filters">
<Filter
filterName="Filter A"
options={ filterOptions }
handler={ filterHandler }
selections={ filterSelections }
selectAllLabel="Select all filter A"
/>
</div>
{ /* more irrelevant stuff */ }
</>
)
}
export default ControlPanel;
and finally, this is where the filters and the components that make them up are defined:
import React, { useState } from "react";
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Label } from 'reactstrap';
import Toggle from 'react-toggle';
import chevronDown from '../icons/chevron-down-dark.svg';
import chevronUp from '../icons/chevron-top.svg';
import closeIcon from '../icons/close.svg';
export const Filter = ({ options, handler, selections, filterName, selectAllLabel }) => {
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen(prevState => !prevState);
return (
<Dropdown isOpen={ dropdownOpen } toggle={ toggle } >
<DropdownToggle>
{ filterName }
<img src={ dropdownOpen ? chevronUp : chevronDown } />
</DropdownToggle>
<DropdownMenu>
<FilterInterface
toggle={ toggle }
filterName={ filterName }
options={ options }
selections={ selections }
handler={ handler }
selectAllLabel={ selectAllLabel }
/>
</DropdownMenu>
</Dropdown>
);
}
const FilterInterface = ({ toggle, filterName, options, selections, handler, selectAllLabel }) => {
const [allSelected, setAllSelected] = useState(false);
const toggleAllSelected = () => {
if (options.length !== selections.length) {
const newSelections = options.map(option => option.id);
handler(newSelections);
setAllSelected(true);
} else {
handler([]);
setAllSelected(false);
}
}
const handleCheck = id => {
let newArray;
if (selections.includes(id)) {
newArray = selections.filter(selection => {
return selection !== id;
});
setAllSelected(false);
} else {
newArray = [...selections, id];
}
handler(newArray);
if (newArray.length === options.length) setAllSelected(true);
}
return (
<>
<DropdownItem header>
{ filterName }
<img src={ closeIcon } onClick={ toggle } />
</DropdownItem>
<DropdownItem header>
{selectAllLabel}
<Toggle
checked={ allSelected }
icons={ false }
onChange={ toggleAllSelected }
/>
</DropdownItem>
{
options?.map(option => (
<DropdownItem header
key={ option.id }
value={ option.name }
className="filterCheckbox"
>
<Label onClick={ () => handleCheck(option.id) }>
<Checkbox checked={ selections.includes(option.id) } readOnly />
<span>{ option.name }</span>
</Label>
</DropdownItem>
))
}
</>
)
}
The thing that finally seemed to do the trick that isn't discussed in the linked article was passing custom comparison functions to the memoized components so they would not update when the dropdown was closed.
I' m new to React and I'm building a simple React app that displays all the nations of the world on the screen and a small search bar that shows the data of the searched nation.
Here an image of the site
But I don't know how to show the country you want to click in the scrollbar.
Here the app.js code:
import React, { Component } from 'react';
import './App.css';
import NavBar from '../Components/NavBar';
import SideBar from './SideBar';
import CountryList from '../Components/SideBarComponents/CountryList';
import Scroll from '../Components/SideBarComponents/Scroll';
import Main from './Main';
import SearchCountry from '../Components/MainComponents/SearchCountry';
import SearchedCountry from '../Components/MainComponents/SearchedCountry';
import Datas from '../Components/MainComponents/Datas';
class App extends Component {
constructor() {
super();
this.state = {
nations: [],
searchField: '',
button: false
}
}
onSearchChange = (event) => {
this.setState({searchField: event.target.value});
console.log(this.state.searchField)
}
onClickChange = () => {
this.setState(prevsState => ({
button: true
}))
}
render() {
const {nations, searchField, button, searchMemory} = this.state;
const searchedNation = nations.filter(nation => {
if(button) {
return nation.name.toLowerCase().includes(searchField.toLowerCase())
}
});
return (
<div>
<div>
<NavBar/>
</div>
<Main>
<div className='backgr-img'>
<SearchCountry searchChange={this.onSearchChange} clickChange={this.onClickChange}/>
<SearchedCountry nations={searchedNation}/>
</div>
<Datas nations={searchedNation}/>
</Main>
<SideBar>
<Scroll className='scroll'>
<CountryList nations={nations} clickFunc/>
</Scroll>
</SideBar>
</div>
);
}
componentDidMount() {
fetch('https://restcountries.eu/rest/v2/all')
.then(response => response.json())
.then(x => this.setState({nations: x}));
}
componentDidUpdate() {
this.state.button = false;
}
}
export default App;
The countryList:
import React from 'react';
import Images from './Images';
const CountryList = ({nations, clickFunc}) => {
return (
<div className='container' style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(115px, 3fr))'}}>
{
nations.map((country, i) => {
return (
<Images
key={country.numericCode}
name={country.name}
flag={country.flag}
clickChange={clickFunc}
/>
);
})
}
</div>
)
}
export default CountryList;
And the images.js:
import React from 'react';
import './images.css'
const Images = ({name, capital, region, population, flag, numericCode, clickChange}) => {
return (
<div className='hover bg-navy pa2 ma1 tc w10' onClick={clickChange = () => name}>
<img alt='flag' src={flag} />
<div>
<h6 className='ma0 white'>{name}</h6>
{capital}
{region}
{population}
{numericCode}
</div>
</div>
);
}
export default Images;
I had thought of using the onClick event on the single nation that was going to return the name of the clicked nation. After that I would have entered the name in the searchField and set the button to true in order to run the searchedNation function.
I thank anyone who gives me an answer in advance.
To keep the actual structure, you can try using onClickChange in Images:
onClickChange = (newName = null) => {
if(newName) {
this.setState(prevsState => ({
searchField: newName
}))
}
// old code continues
this.setState(prevsState => ({
button: true
}))
}
then in onClick of Images you call:
onClick={() => {clickChange(name)}}
Or you can try as well use react hooks (but this will require some refactoring) cause you'll need to change a property from a parent component.
With that you can use useState hook to change the value from parent component (from Images to App):
const [searchField, setSearchField] = useState('');
Then you pass setSearchField to images as props and changes the searchField value when Images is clicked:
onClick={() => {
clickChange()
setSearchField(name)
}}
I'm working on a coding challenge and I'm having problems to navigate back and forth between my components. Here's what a very simplified version of my parent component looks like:
import React, { useState } from 'react';
function App() {
const [component, setComponent] = useState({
shoppingBasket: true,
contactDetails: false,
paymentOptions: false,
checkout: false,
summary: false
});
const switchState = input => {
const { name, value } = input.target;
setComponent({
...component,
[name]: value
});
};
return (
<>
{
component.shoppingBasket &&
<ShoppingBasket
shoppingBasket={component.shoppingBasket}
switchState={switchState}
/>
}
{
component.contactDetails &&
<ContactDetails
contactDetails={component.contactDetails}
switchState={switchState}
/>
}
{
component.paymentOptions &&
<PaymentOptions
paymentOptions={component.paymentOptions}
switchState={switchState}
/>
}
{
component.checkout &&
<Checkout
checkout={component.checkout}
switchState={switchState}
/>
}
{
component.summary &&
<Summary
summary={component.summary}
switchState={switchState}
/>
}
</>
);
}
export default App;
It's supposed to be the checkout screen of an e-commerce page and it starts with the <ShoppingBasket /> component. When clicking "Continue", it shows the next component, when clicking "Back" it goes back to the previous one. They should appear in the order shown in the code.
My first attempt was to show the next component only when the previous one(s) evaluate true but at the end it was showing all of the components, so that didn't work. Note: I passed the switchState function and the respective state as prop to the child component.
I guess the smartest way is to show only the component that is currently selected but how do I do that? I assume working with IDs?
And would it be still necessary to keep track of the previous components evaluating to true, when it's only showing the selected one anyway?
SOLUTION:
Parent component (simplified but working):
import React, { useState } from 'react';
// COMPONENTS
import ShoppingBasket from './components/ShoppingBasket';
import PaymentOptions from './components/PaymentOptions';
import ContactDetails from './components/ContactDetails';
import Checkout from './components/Checkout';
import Summary from './components/Summary';
export default function App() {
const [component, setComponent] = useState(0);
const switchComponent = (index) => {
setComponent(index);
};
return (
<>
{
{
0: <ShoppingBasket switchComponent={switchComponent} />,
1: <ContactDetails switchComponent={switchComponent} />,
2: <PaymentOptions switchComponent={switchComponent} />,
3: <Checkout switchComponent={switchComponent} />,
4: <Summary />,
}[component]
}
</>
);
}
Child component with index 3 (also simplified):
import React from 'react';
export default function Checkout({ switchComponent }) {
return (
<>
<button onClick={() => switchComponent(2)}>BACK</button>
<button onClick={() => switchComponent(4)}>CONTINUE</button>
</>
);
}
Update:
import React, { useState } from 'react';
function App() {
const [component, setComponent] = useState(0);
const switchComponent = index => {
setComponent(index);
};
return (
<>
{
// this act like switch case js function
{
0:
(<ShoppingBasket
//shoppingBasket={component.shoppingBasket} // no need for this
componentIndex={component}
switchState={switchComponent}
/>),
1:
(<ContactDetails
// contactDetails={component.contactDetails}
componentIndex={component}
switchState={switchComponent}
/>),
2:
(<PaymentOptions
// paymentOptions={component.paymentOptions}
componentIndex={component}
switchState={switchComponent}
/>),
3:
(<Checkout
// checkout={component.checkout}
componentIndex={component}
switchState={switchComponent}
/>),
4:
(<Summary
// summary={component.summary}
componentIndex={component}
switchState={switchComponent}
/>)
}[component]
}
</>
);
}
export default App;
ShoppingBasket.js
const ShoppingBasket = props => {
return (
// your ShoppingBasket component .....
)
}
** ContactDetails.js**
const ContactDetails = props => {
return (
// your ContactDetails component .....
)
}
....... the same for other components
App.js
import React, { useState } from 'react';
function App() {
const [component, setComponent] = useState(0);
const switchComponent = index => {
setComponent(index);
};
return (
<>
{
// this act like switch case js function
//
{
0:
(<ShoppingBasket/>),
1:
(<ContactDetails/>),
2:
(<PaymentOptions/>),
3:
(<Checkout/>),
4:
(<Summary/>)
}[component]
}
// navigation buttons .... always visible
<NavigateButtons
componentIndex={component}
switchState={switchComponent}
/>
</>
);
}
export default App;
----------------------------------***----------------
Note : make sure the buttons next and previous are just one splited component so you can use it in diffrent other components
const NavigateButtons = (props) => (
<div>
<Button
disabled={componentIndex == 4}
onClick={()=> props.switchState(componentIndex + 1)}>next
</Button>
<Button
disabled={componentIndex == 0}
onClick={()=> props.switchState(componentIndex - 1)}>previous
</Button>
</div>
)
I am attempting to make a multi-page form with a switch statement and I am having trouble with updating the props.values.step, what I am using as my switch statement variable, with a function I continue to get a "xyz is not a function" error attached is the code any help would be great and thank you.
<--------------App.js------------------>
import React from "react";
import MyEnhancedForm from "./pages/FormHolder";
function App() {
return (
<div className="App">
<MyEnhancedForm />
</div>
);
}
export default App;
<--------------FormHolder.js------------------>
import Form from "./Form";
import { withFormik, Field } from "formik";
import * as Yup from "yup";
import VerifyPage from "./Verifypage";
const FormHolder = props => {
function handleIncrease() {
props.values.step += 1;
}
switch (props.values.step) {
case 1:
return <Form {...props} handleIncrease={handleIncrease} />;
case 2:
return <VerifyPage {...props} />;
default:
return null;
}
};
const MyEnhancedForm = withFormik({
mapPropsToValues: () => ({ step: 1, name: "" }),
validationSchema: Yup.object().shape({
name: Yup.string()
.max(55, "Error: Name is too long.")
.min(3, "Error: Name to short.")
}),
handleSubmit: () => {}
})(FormHolder);
export default MyEnhancedForm;
<-----------Form.js--------------->
import React from "react";
import { Field } from "formik";
import { DisplayFormikState } from "./helper";
import { Card, FormGroup, Input, Label, Button } from "reactstrap";
const Form = (props, { handleIncrease }) => {
const nextStep = e => {
props.errors.name ? console.log(props.errors) : handleIncrease();
};
return (
<Card>
<FormGroup>
<Label for="name"></Label>
<Input
tag={Field}
bsSize="lg"
type="text"
name="name"
id="name"
component="input"
/>
<Button type="submit" onClick={nextStep}>
Next
</Button>
<DisplayFormikState {...props} />
</FormGroup>
</Card>
);
};
export default Form;
<--------------VerifyPage.js------------------>
Haven't made it to the verify page yet so that's why there is very little on it.
import React from "react";
import * as Yup from "yup";
import { withFormik, Field } from "formik";
import { DisplayFormikState } from "./helper";
import { Card, FormGroup, Input, Label, Button } from "reactstrap";
const VerifyPage = props => {
const prevStep = event => {
event.preventDefault();
props.handleDecrease();
};
return (
<Card>
Verify Page
<DisplayFormikState {...props} />
</Card>
);
};
export default VerifyPage;
<--------------helper.js------------------>
import React from "react";
export const DisplayFormikState = props => (
<div style={{ margin: "1rem 0" }}>
<h3 style={{ fontFamily: "monospace" }} />
<pre
style={{
background: "#f6f8fa",
fontSize: ".65rem",
padding: ".5rem"
}}
>
<strong>props</strong> = {JSON.stringify(props, null, 2)}
</pre>
</div>
);
Your problem is in Form.js:
const Form = (props, { handleIncrease }) => {
const nextStep = e => {
props.errors.name ? console.log(props.errors) : handleIncrease();
};
handleIncrease is a prop, so you should do something like this instead:
const Form = props => {
const nextStep = e => {
props.errors.name ? console.log(props.errors) : props.handleIncrease();
};
Another problem: You're mutating values.step, which will cause further issues (e.g. updating it won't cause a re-render). There's no real reason to have Formik manage step, since it's not a form input value. Instead, you could just store it in state:
const FormHolder = props => {
const [step, setStep] = React.useState(1);
function handleIncrease() {
setStep(step => step + 1);
}
function handleDecrease() {
setStep(step => step - 1);
}