Is it possible to substitute the value from useState with the one coming from input?
Or is there a way to do this using dispatch?
I have tried many ways, but none of them work.
const renderInput = ({
input,
label,
type,
meta: { asyncValidating, touched, error },
}) => {
const [value, setValue] = useState('default state');
const onChange = event => {
setValue(event.target.value);
// + some logic here
};
return (
<div>
<label>{label}</label>
<div className={asyncValidating ? 'async-validating' : ''}>
<input {...input} value={value} onChange={onChange} type={type} placeholder={label} />
{touched && error && <span>{error}</span>}
</div>
</div>
);
};
const SelectingFormValuesForm = props => {
const { type, handleSubmit, pristine, reset, submitting } = props;
return (
<form onSubmit={handleSubmit}>
<div>
<label>Name</label>
<div>
<Field
name="name"
component={renderInput}
type="text"
placeholder="Dish name..."
/>
</div>
</div>
</form>
);
};
SelectingFormValuesForm = reduxForm({
form: 'selectingFormValues',
validate,
asyncValidate,
// asyncBlurFields: ['name'],
})(SelectingFormValuesForm);
export default SelectingFormValuesForm;
This way, unfortunately, the value sent to the submit remains empty.
Related
I want to work using maltiple values in use state and crud in local storage use state like
const [Data,setData]=[[{
name:'luis',
pass:'1234',
//.......
}]
]
And it updates with the form
<input>
// .......
if value true Display take look at this example I try but I cannot do how to solve it
import './App.css';
import React, { useState,useEffect } from 'react';
function App() {
const [User, setUser] = useState([
{
Name:'',
Pass:'',
Email:'',
}
]);
const [storedUser,setstoredUser]=useState([])
const handle = () => {
localStorage.setItem(JSON.stringfy(...User))
setstoredUser(...User);
};
const remove = () => {
localStorage.removeItem();
};
return (
<div className="App">
<h1>Name of the user:</h1>
<input
placeholder="Name"
name='Name'
value={User.Name}
onChange={(e) => setUser({...User,[e.target.name]:[e.target.value]})}
/>
<h1>Password of the user:</h1>
<input
type="password"
name="Pass"
placeholder="Password"
value={User.Pass}
onChange={(e) => setUser({...User,[e.target.name]:[e.target.value]})}
/>
<h1>Email of the user:</h1>
<input
type="mail"
name="Email"
placeholder="Email"
value={User.Email}
onChange={(e) => setUser({...User,[e.target.name]:[e.target.value]})}
/>
<div>
<button onClick={handle}>Done</button>
</div>
{storedUser.Name && (
<div>
Name: <p>{localStorage.getItem('Name')}</p>
</div>
)}
{storedUser.Pass && (
<div>
Password: <p>{localStorage.getItem('Pass')}</p>
</div>
)}
{storedUser.Email && (
<div>
Password: <p>{localStorage.getItem('Email')}</p>
</div>
)}
<div>
<button onClick={remove}>Remove</button>
</div>
</div>
);
}
export default App;
Here I try how to do this formate I try to all data in state and stringify set this local storage. then remove and display I think explaine on detail
You're missing the key
localStorage.setItem("User",JSON.stringfy(...User))
If you want each key. Loop over they keys and values and set them. As stated by another user, your UserState is an array where it should just be an object
Object.entries(User).forEach(([key,value])=>{
localStorage.setItem(key,value)
})
You are doing a few things incorrectly here:
you are not providing a key for local storage
you don't need to spread objects directly inside setState
use the removeItem method to clear the user from localStorage
you are setting the user as an array to state not an object, this is unnecessary in the example you have
If the goal is to persist a single user between sessions via local storage. Then all you need to do is save the user to local storage when the form is submitted.
Then, when the component loads, check local storage for user data.
import { useEffect, useState } from 'react'
function App() {
const [User, setUser] = useState({
Name: '',
Pass: '',
Email: '',
})
const handle = () => {
const nextUser = JSON.stringify(User)
localStorage.setItem('user', nextUser)
}
const remove = () => {
localStorage.removeItem('user')
}
useEffect(() => {
const storedUser = localStorage.getItem('user')
if (storedUser) {
setUser(JSON.parse(storedUser))
}
}, [])
return (
<div className="App">
<h1>Name of the user:</h1>
<input
placeholder="Name"
name="Name"
value={User.Name}
onChange={(e) => setUser({ ...User, [e.target.name]: e.target.value })}
/>
<h1>Password of the user:</h1>
<input
type="password"
name="Pass"
placeholder="Password"
value={User.Pass}
onChange={(e) => setUser({ ...User, [e.target.name]: e.target.value })}
/>
<h1>Email of the user:</h1>
<input
type="mail"
name="Email"
placeholder="Email"
value={User.Email}
onChange={(e) => setUser({ ...User, [e.target.name]: e.target.value })}
/>
<div>
<button onClick={handle}>Done</button>
</div>
{User.Name && (
<div>
Name: <p>{User.Name}</p>
</div>
)}
{User.Pass && (
<div>
Password: <p>{User.Pass}</p>
</div>
)}
{User.Email && (
<div>
Password: <p>{User.Email}</p>
</div>
)}
<div>
<button onClick={remove}>Remove</button>
</div>
</div>
)
}
export default App
Since User already is an array of user objects I wouldn't spread them in your handle function. You also need to set a key if you're saving in localStorage. This is how to save your list of users under "users":
const handle = () => {
localStorage.setItem("users", JSON.stringfy(User));
setstoredUser(User);
};
Now when retrieving users from the localStorage you can make use of JSON.parse like this:
users = JSON.parse(localStorage.getItem("users") || "[]");
And for deletion you would need the key "users" here as well:
localStorage.removeItem("users");
I am new to react and I have just started using Formik
I like how simple it makes making forms and handling forms in react.
I have created multiple custom fields using formik, I am putting the react-select field I created as an example here.
import { ErrorMessage, Field } from "formik";
import React from "react";
import Select from 'react-select'
const SelectInput = (props) => {
const { label, name, id,options, required, ...rest } = props;
const defaultOptions = [
{label : `Select ${label}`,value : ''}
]
const selectedOptions = options ? [...defaultOptions,...options] : defaultOptions
return (
<div className="mt-3">
<label htmlFor={id ? id : name}>
{label} {required && <span className="text-rose-500">*</span>}
</label>
<Field
// className="w-full"
name={name}
id={id ? id : name}
>
{(props) => {
return (
<Select
options={selectedOptions}
onChange={(val) => {
props.form.setFieldValue(name, val ? val.value : null);
}}
onClick = {(e)=>{e.stopPropagation}}
{...rest}
// I want someting like onReset here
></Select>
);
}}
</Field>
<ErrorMessage
name={name}
component="div"
className="text-xs mt-1 text-rose-500"
/>
</div>
);
};
export default SelectInput;
This is the usual code I use for submitting form as you can see I am using resetForm() method that is provided by formik, I want to attach the reseting logic in on submit method itself.
const onSubmit = async (values, onSubmitProps) => {
try {
//send request to api
onSubmitProps.resetForm()
} catch (error) {
console.log(error.response.data);
}
};
If you want to reset the selected value after the form is submitted, you need to provide a controlled value for the Select component.
The Formik Field component provides the value in the props object, so you can use it.
For example:
SelectInput.js
import { ErrorMessage, Field } from 'formik';
import React from 'react';
import Select from 'react-select';
const SelectInput = ({ label, name, id, options, required, ...rest }) => {
const defaultOptions = [{ label: `Select ${label}`, value: '' }];
const selectedOptions = options ? [...defaultOptions, ...options] : defaultOptions;
return (
<div className='mt-3'>
<label htmlFor={id ? id : name}>
{label} {required && <span className='text-rose-500'>*</span>}
</label>
<Field
// className="w-full"
name={name}
id={id ? id : name}
>
{({
field: { value },
form: { setFieldValue },
}) => {
return (
<Select
{...rest}
options={selectedOptions}
onChange={(val) => setFieldValue(name, val ? val : null)}
onClick={(e) => e.stopPropagation()}
value={value}
/>
);
}}
</Field>
<ErrorMessage name={name} component='div' className='text-xs mt-1 text-rose-500' />
</div>
);
};
export default SelectInput;
and Form.js
import { Formik, Form } from 'formik';
import SelectInput from './SelectInput';
function App() {
return (
<Formik
initialValues={{
firstName: '',
}}
onSubmit={async (values, { resetForm }) => {
console.log({ values });
resetForm();
}}
>
<Form>
<SelectInput
name='firstName'
label='First Name'
options={[{ label: 'Sam', value: 'Sam' }]}
/>
<button type='submit'>Submit</button>
</Form>
</Formik>
);
}
export default App;
Therefore, if you click the Submit button, value in the Select component will be reset.
You can also make a useRef hook to the Fromik component and then reset the form within the reset function without adding it as a parameter to the function.
https://www.w3schools.com/react/react_useref.asp
It's one of the really nice hooks you'll learn as you progress through React :)
So if I understood you correctly you want to reset a specif field value onSubmit rather than resetting the whole form, that's exactly what you can achieve using actions.resetForm().
Note: If nextState is specified, Formik will set nextState.values as the new "initial state" and use the related values of nextState to update the form's initialValues as well as initialTouched, initialStatus, initialErrors. This is useful for altering the initial state (i.e. "base") of the form after changes have been made.
You can check this in more detail here.
And here is an example of resetting a specific field using resetForm() whereby you can see as you input name, email and upon submit only email field will get empty using resetForm.
import "./styles.css";
import React from "react";
import { Formik } from "formik";
const initialState = {
name: "",
email: ""
};
const App = () => (
<div>
<h1>My Form</h1>
<Formik
initialValues={initialState}
onSubmit={(values, actions) => {
console.log(values, "values");
actions.resetForm({
values: {
email: initialState.email
}
});
}}
>
{(props) => (
<form onSubmit={props.handleSubmit}>
<input
type="text"
onChange={props.handleChange}
onBlur={props.handleBlur}
value={props.values.name}
name="name"
/>
<br />
<input
type="text"
onChange={props.handleChange}
onBlur={props.handleBlur}
value={props.values.email}
name="email"
/>
<br />
<br />
{props.errors.name && <div id="feedback">{props.errors.name}</div>}
<button type="submit">Submit</button>
</form>
)}
</Formik>
</div>
);
export default App;
What's the best way to store values typed into the text fields here?
const AddUserPage = () => (
<div>
<PermanentDrawerLeft></PermanentDrawerLeft>
<div className='main-content'>
<form className="ROOT" noValidate autoComplete="off">
<TextField id="standard-basic" label="Standard" />
</form>
</div>
</div>
);
export default AddUserPage;
I want to find a way such that I can use the stored values in my GraphQL mutations as well, without having to modify the const() structure of my page. I don't want to use the Class Component Extend or function structure here.
What is your const() structuremakes:
=> (This is the auto return syntax.)
If you want to store/reuse your value, you will have to define some state/variable to store the data.
You can also do it in upper component like:
import React, { useState } from "react";
const Parent = props => {
const [state, setState] = useState({ text: "" });
return <AddUserPage value={state.text} onChange={e => setState(prev => ({ ...prev, text: e.target.value || "" }))} />
}
const AddUserPage = ({ value = "" , onChange }) => (
<div>
<PermanentDrawerLeft></PermanentDrawerLeft>
<div className='main-content'>
<form className="ROOT" noValidate autoComplete="off">
<TextField id="standard-basic" value={value} onChange={onChange} label="Standard" />
// value, and Onchange comes from an upper component
</form>
</div>
</div>
);
I've got a custom component called InputWithButton that looks like this:
const InputWithButton = ({ type = "text", id, label, isOptional, name, placeholder = "", value = "", showPasswordReset, error, isDisabled, buttonLabel, handleChange, handleBlur, handleClick }) => (
<StyledInput>
{label && <label htmlFor="id">{label}{isOptional && <span className="optional">optioneel</span>}</label>}
<div>
<input className={error ? 'error' : ''} type={type} id={id} name={name} value={value} placeholder={placeholder} disabled={isDisabled} onChange={handleChange} onBlur={handleBlur} autoComplete="off" autoCorrect="off" />
<Button type="button" label={buttonLabel} isDisabled={isDisabled} handleClick={() => handleClick(value)} />
</div>
{error && <Error>{Parser(error)}</Error>}
</StyledInput>
);
export default InputWithButton;
Button is another component and looks like this:
const Button = ({ type = "button", label, isLoading, isDisabled, style, handleClick }) => (
<StyledButton type={type} disabled={isDisabled} style={style} onClick={handleClick}>{label}</StyledButton>
);
export default Button;
I'm using the InputWithButton component in a parent component like this:
render() {
const { name } = this.state;
return (
<React.Fragment>
<InputWithButton label="Name" name="Name" buttonLabel="Search" value={name} handleChange={this.handleChange} handleClick={this.searchForName} />
</React.Fragment>
);
}
If the button is clicked, the searchForName function is called:
searchForName = value => {
console.log(value); //Input field value
}
This is working but I want to add another parameter to it but this time, a parameter that comes from the parent component
// handleClick={() => this.searchForName('person')}
<InputWithButton label="Name" name="Name" buttonLabel="Search" value={name} handleChange={this.handleChange} handleClick={() => this.searchForName('person')} />
The output in searchForName is now 'person' instead of the value.
I thought I could fix this with the following code:
searchForName = type => value => {
console.log(type); //Should be person
console.log(value); //Should be the value of the input field
}
However this approach doesn't execute the function anymore.
How can I fix this?
EDIT: Codepen
I would try handleClick={this.searchForName.bind(this, 'person')}, please let me know if it'll work for you.
EDIT:
I changed fragment from your codepen, it's working:
searchName(key, value) {
console.log(key);
console.log(value);
}
render() {
const { name } = this.state;
return (
<InputWithButton name="name" value={name} buttonLabel="Search" handleChange={this.handleChange} handleClick={this.searchName.bind(this, 'person')} />
)
}
as I suspected, just pass it an object and make sure you're accepting the argument in your handleClick function
handleClick={value => this.searchName({value, person: 'person'})}
or more verbose - without the syntactic sugar
handleClick={value => this.searchName({value: value, person: 'person'})}
then you can get at it with value.person
full codepen here
Hope this helps
The use case is there will be add topic button which when clicked should show a form for adding the topic. When user fills the topic form and hits the save button, that topic should be shown in the input box with edit button instead of add. There can be multiple topics. For example, if I have 4 topics already or saved them after adding then they should be displayed with edit button. The way I am doing is not even triggering handleChange.
I have created a sandbox for this and here it is
https://codesandbox.io/s/koqqvz2307
The code
class FieldArray extends React.Component {
state = {
topics: [],
topic: ""
};
handleChange = e => {
console.log("handleChange", e);
this.setState({ topic: { ...this.state.topic, topic: e.target.value } });
};
handleSubmit = e => {
e.preventDefault();
console.log("state of topics array with multiple topics");
};
render() {
return (
<div>
<FieldArrayForm
topics={this.state.topics}
topic={this.state.topic}
handleChange={this.handleChange}
handleSubmit={this.handleSubmit}
/>
</div>
);
}
}
export default FieldArray;
const renderField = ({ input, label, type, meta: { touched, error } }) => (
<div>
<label>{label}</label>
<div>
<input {...input} type={type} placeholder={label} />
{touched && error && <span>{error}</span>}
</div>
</div>
);
const renderTopics = ({
fields,
meta: { error },
handleChange,
handleSubmit,
topic
}) => (
<ul>
<li>
<button type="button" onClick={() => fields.push()}>
Add Topic
</button>
</li>
{fields.map((topicName, index) => (
<li key={index}>
<span>
<Field
name={topicName}
type="text"
onChange={handleChange}
component={renderField}
label={`Topic #${index + 1}`}
/>
<span>
<button
type="button"
title="Remove Hobby"
onClick={() => fields.remove(index)}
>
Remove
</button>
{topic ? (
<button type="button" title="Add" onSubmit={handleSubmit}>
Edit
</button>
) : (
<button type="button" title="Add" onSubmit={handleSubmit}>
Add
</button>
)}
</span>
</span>
</li>
))}
{error && <li className="error">{error}</li>}
</ul>
);
const FieldArraysForm = props => {
const { handleSubmit, pristine, reset, submitting } = props;
return (
<form onSubmit={handleSubmit}>
<FieldArray name="topic" component={renderTopics} />
</form>
);
};
export default reduxForm({
form: "fieldArrays", // a unique identifier for this form
validate
})(FieldArraysForm);
How do i save and show multiple topics when using redux-form? I tried to take the concept from fieldarray but i could not do it yet.
Your handleChange is undefined, and this is why your function isn't being called.
If you are willing that renderTopics receive a handleChange function, you should pass the handleChange prop to the FieldArray component (according to redux-form docs):
const FieldArraysForm = props => {
const { handleChange, handleSubmit, pristine, reset, submitting } = props;
return (
<form onSubmit={handleSubmit}>
<FieldArray name="topic" component={renderTopics} handleChange={handleChange} />
</form>
);
};
Alternatively, you can simply pass all props from FieldArraysForm to the FieldArray component:
const FieldArraysForm = props => (
<form onSubmit={handleSubmit}>
<FieldArray name="topic" component={renderTopics} {...props} />
</form>
);