I am trying to use Formik on my form that successfully does some state lift up from a custom Input child component to its parent (following that tutorial from React's official website)
The following sandbox shows a basic example of what I have so far :
https://codesandbox.io/s/formik-with--or-without-custom-component-d8sof
(yes, there is some styled-components going on with InputStyled but it's supposed to be "transparent")
<Input //switch to input to try other scenario
type="number"
name="surface"
placeholder="please type surface"
onValueChange={handleSurfaceChange}
unit="sq feet"
value={values.surface}
onChange={handleChange}
/>
The excerpt above shows a custom component called Input (please note the capitalized "I")
With this custom component Input : lifting state up works but surface is not tracked by Formik and validation always fails.
With input (lower case - not calling my custom component) : validation by Formik works but I'm not using my custom component therefore I'm not engaging in the lifting of the child state up.
=> My goal would be to make both work.
So I tried using <Field component={Input} /> instead of my <Input />
https://jaredpalmer.com/formik/docs/api/field
But I cannot get my head around how to make the code work.
I started working on another codesanbox example following different trails here and there but things are getting messy.
https://codesandbox.io/s/formik-with--or-without-custom-component-ybbm7
In the parent:
<Field
component={Input} //my custom React Component
type="number"
name="surface"
placeholder="please type surface"
onValueChange={handleSurfaceChange}
value={values.surface}
//at a loss below
//onChange={handleChange}
// handleChange={e => {
// console.log("Entering handleChange in Field...");
// // call the built-in handleChange
// handleChange(e);
// // and do something about e
// let someValue = e.currentTarget.value;
// console.log("someValue = " + someValue);
// }}
/>
In the child (it's a styled-component, nothing fancy,just a regular input "decorated" with CSS) :
<InputStyled
{...field}
{...props}
id={props.name}
name={props.name}
type={props.type}
//value={props.value}
onChange={handleChange}
// onChange={newValue => {
// setFieldValue(field.name, newValue);
// console.log("newValue = " + newValue);
// }}
placeholder={props.placeholder}
/>
{touched[field.name] && errors[field.name] && (
<div className="error">{errors[field.name]}</div>
)}
I cannot find the right way to deal with the onChange, handleChange events from Formik and from myself. the lifting of the state up and the Formik validations are broken.
Can someone point me in the right direction for the correct syntax please ?
Related
I have a form in which all input, select tags are separate components and each component but the submit button is in the form it self like-
<form>
<InputComp1 />
<InputComp2 />
<Select1 />
<Select2 />
<button type='submit' value='Register'/>
</form>
So how do I collect all state from various components and when user clicks on the submit the values get submitted.?
Is this approach while dealing with forms right? or should I manage state of all tags in the same component?
Manage the state of all inputs/selects in this component. You can pass values and handler functions to the inputs using props.
There is no "right" approach, the answer depends on the context.
You can have form as a controlled component, where you manage the state of all tags (while passing callbacks down the tree) as you suggested and as mentioned in docs.
Or, you can have it as uncontrolled component, for example:
const Input = ({ name }) => {
return <input name={name} />;
};
const Component = () => {
return (
<>
<form
onSubmit={(e) => {
e.preventDefault();
const data = new FormData(e.target);
const entries = data.entries();
for (let entry of entries) {
console.log(entry);
}
}}
>
<Input name="username" />
<Input name="email" />
<input type="submit" value="Submit" />
</form>
</>
);
};
See controlled vs uncontrolled components.
Yes you should manage the state in the parent component itself and pass the onchange handler and value of that field as props inside the child components to update the value of the form fields.
Solution #1 would be "manage state react way". With this you should store state you need to share between components somewhere in their common ancestor. In your case it would be component that holds Form
Solution #2 applicable only if you use real form and form controls. Handle 'submit' event from the form and get all you need to submit from form data.
Solution #3 applicable only if you use some sort of "state manager". Follow instructions and best practices of the library you use.
In some cases you can mix and match that solutions. For example I still recommend to handle 'submit' event on form regardless of solution.
there is a concept of state lifting in react:
create a controlled form here and for every child, component pass a function to get the data from child components to parent one. by doing this you can submit all the values once.
here is the example
import React, {useState} from 'react';
const ChildInput = ({onChange, id}) => {
return(
<input
key={id}
type="text"
placeholder="enter name"
onChange={onChange}
/>
)
}
const Parent = () => {
const [name, setName] = useState('');
const onSubmit =(e)=>{
e.preventDefault();
// append your all data here just like child component
data = {name}
}
return(
<form onSubmit={onSubbmit}>
<ChildInput onChange={()=>setName(e.target.value)} id="name" />
<button type="submit" value="submit"/>
</form>
)}
for more information check this one: https://reactjs.org/docs/glossary.html#controlled-vs-uncontrolled-components
I am unable to clear the value of a material-ui Input using refs, not state.
I've tried both types of refs that I know about:
ref={this.input}
- and -
ref={el => (this.input = el)}
but neither seems to work w/ a material-ui Input
the following similar questions did not help:
How to get input value of TextField from Material UI?
Clear and reset form input fields
Clear an input field with Reactjs?
how to set Input value in formField ReactJs
Here's a snippet of my React JSX for the input & button:
<Input
type="text"
id="name"
inputComponent="input"
ref={el => (this.name = el)}
/>
<Button
variant="contained"
onClick={this.handleClear}
className="materialBtn"
>
Clear
</Button>
And the event handler that I expect should clear the input value:
handleClear() {
this.name.value = "";
}
I can make the code work fine using a standard HTML5 input, but not with a material-ui input, which is a requirement of this project. Additionally, this element's value is NOT in react state and I am not looking for a solution that requires using state -- I need to keep this piece as an uncontrolled component.
What am I missing w/ regard to material-ui? I have combed their docs/api but haven't found anything that suggests it needs to be handled differently from a standard input. thanks
Here's an example on CodeSandbox showing the failure w/ a material-ui input and success w/ an HTML5 input:
https://codesandbox.io/s/fancy-frost-joe03
I figured it out, you are using the wrong prop for the ref.
You should be using inputRef prop.
Here is the correct version,
<Input
type="text"
id="name"
inputComponent="input"
inputRef={el => this.name = el}
/>
<Button
variant="contained"
onClick={this.handleClear}
className="materialBtn"
>
Clear
</Button>
handleClear() {
this.name.value = "";
}
The reason is that the Material Input component creates an element with the following structure,
<div class="MuiInputBase-root MuiInput-root MuiInput-underline">
<input class="MuiInputBase-input MuiInput-input" id="name" type="text" value=""></input>
</div>
So, using ref would reference the root element which is <div>. So, they created a separate prop called inputRef to reference the child element <input>.
I updated your codesandbox.io code and saved it. Check out the full working code here,
https://codesandbox.io/s/elastic-dhawan-l4dtf
import React, { useState } from 'react'
import { Button, Container, InputBase } from '#material-ui/core'
const ClearText = ()=> {
const [text , setText] = useState("")
}
const clearTextField = () => setText("")
return (
<Container>
<InputBase
value={text ? text : ""}
onChange={(e)=>setText(e.target.value)}
/>
<Button onClick={clearTextField} > Clear </Button>
</Container>
)
};
export default ClearText;
We have our own input components (like Checkbox, Textbox, or even CurrencyInput component)
We are now using Formik. So we replaced all <input... with <Field... in our components, eg.
const Checkbox = (props) => {
...
return (
<div className={myClass1}>
<Field type='checkbox' name={props.name} className={myClass2} ... />
<label ...>{props.label}</label>
</div>
)
};
Now the problem is, we can't have a standalone Checkbox outside a form anymore (eg. for an on-screen-only option). It will throw:
this.props.formik.registerField is not a function
We feel this is a dealbreaker. But before we ditch Formik and write our own form validation logics, I wonder if anyone else are having this dependency issue.
Is there really no way of rendering Formik Field outside Formik?
The Field component is what connects a form field to the Formik state. It uses context under the hood; Formik is the context provider and Field is the context consumer. Field is tied to Formik and has no use outside of it. For your use case where you want to render form fields that are sometimes connected to Formik and sometimes not, I would export two different components:
The base Checkbox component that has nothing to do with Formik. It should just use a normal input
A Field wrapper around that Checkbox component
While the Field component can take a type, causing it to render the corresponding input, it can also take a render prop to render whatever you want, and it is passed all of the state Formik manages for that field.
For example, your Checkbox and CheckboxField components could looks something like this:
const Checkbox = (props) => {
...
return (
<div className={myClass1}>
<input type='checkbox' checked={props.checked} onChange={props.onChange} />
<label ...>{props.label}</label>
</div>
)
};
const CheckboxField = (props) => {
return (
<Field name={props.name}>
{(field) => <Checkbox label={props.label} {...field} />}
</Field>
)
}
Now you use have two components that render exactly the same, but one is meant to be used within a Formik form (CheckboxField) and the other can be used anywhere (Checkbox).
I was just playing a bit with a more generic way of dealing with form data, and figured that setting a single onChange listener on the wrapping form tag should work for all changes to input fields.
And indeed, it does - no surprise there. Events get called, I know what changed by inspecting event.target.name and can update state accordingly. Fully as expected.
However, React doesn't seem to like it and spams the well known "You provided a value prop to a form field without an onChange handler" console warning.
Would there be any other reason for not doing this, apart from the console warning? It seems to eliminate a lot of duplication React otherwise gets criticised about.
class App extends Component {
state = {
name: 'Default Name',
number: 12,
}
handleChange = (event) => {
this.setState({
[event.target.name]: event.target.value,
})
}
render() {
const { crashLogo } = this.props;
return (
<div className="App">
<form onChange={this.handleChange}>
<input type="text" name="name" value={this.state.name} />
<input type="number" name="number" value={this.state.number} />
</form>
</div>
);
}
}
Just for clarity: I'm not asking for alternative solutions, I know I can set the same change listener directly on every input, use redux-form, own wrapper components with context magic and so on...
given the fact in the example http://redux-form.com/6.0.5/examples/fieldArrays/. All the renderField.. functions are outside of the React Class. Hence how am i suppose to use react state or props to determine whether i want to hide or show a Field?
What I'm trying to do is to have a button to manipulate a state to display 'block' or 'none' for a Field. Can someone guide me? I tried to put the renderField variable inside the render of the React class, however this result in bugs.
All the props which are passed to Field are accessible to component props.
<Field
name={foo}
type="text"
component={TextField}
displayBlock={displayBlock}
/>
const TextField = props => {
if(props.displayBlock) {
...
}
return (
<div>
<input {...props.input} />
</div>
);
};
Thanks to Runaground who suggested an answer to me. I came to realized that I can pass in state as props to the FieldArray, such as
<FieldArray name="histories" component={renderHistories} openClose={this.state.openClose}/>
This allow me to utilize an array of state from this.state.openClose, to control which field i would like to hide or show.
<Field
name={`${histories}.details`}
type="text"
component={renderField}
style={{display: openClose[index] ? 'block' : 'none'}}
/>
However, even though I am able to control the display of the Field, the field array does not get rerendered.
Hence, I have to add on two functions
fields.push({});
setTimeout(()=>{
fields.pop();
}, 1);
that is taken from http://redux-form.com/6.0.5/docs/api/FieldArray.md/, to actually rerender the fieldarray whenever i hide or show the field. Hopefully there is a more elegant way to do this as the fieldarray does flicker.