React Forms - Revision history

Iwiseman: /* Formik with Functional Components */

2021-07-12T01:30:41Z

Formik with Functional Components

← Older revision		Revision as of 01:30, 12 July 2021
Line 589:		Line 589:
	</syntaxhighlight>		</syntaxhighlight>
	Usage of this would look like this where we are passing a label to always be associated with the field.		Usage of this would look like this where we are passing a label to always be associated with the field.
	<syntaxhighlight lang="js">		<syntaxhighlight lang="jsx">
	<TestTextInput		<TestTextInput
	label="First Name"		label="First Name"

2021-07-12T01:30:16Z

Formik with Functional Components

← Older revision		Revision as of 01:30, 12 July 2021
Line 528:		Line 528:
	=Formik with Functional Components=		=Formik with Functional Components=
	Here is the sample from the Formik help showing how to make a similar form with the Formik hooks. The documentation is pretty good.		Here is the sample from the Formik help showing how to make a similar form with the Formik hooks. The documentation is pretty good.
	<syntaxhighlight lang="js">		<syntaxhighlight lang="jsx">
	import React from 'react';		import React from 'react';
	import { Formik } from 'formik';		import { Formik } from 'formik';

2021-07-12T01:29:44Z

Implementation in JSX

← Older revision		Revision as of 01:29, 12 July 2021
Line 423:		Line 423:
	</syntaxhighlight>		</syntaxhighlight>
	For on a field level		For on a field level
	<syntaxhighlight lang="js">		<syntaxhighlight lang="jsx">
	static validatePassword(value) {		static validatePassword(value) {
	let error;		let error;
Line 434:		Line 434:
	}		}
	</syntaxhighlight>		</syntaxhighlight>

	=useField Hook=		=useField Hook=
	==Input==		==Input==

2021-07-12T01:29:15Z

Formik Validation

← Older revision		Revision as of 01:29, 12 July 2021
Line 352:		Line 352:
	==Field Level==		==Field Level==
	Note the returning of undefined '''not''' null		Note the returning of undefined '''not''' null
	<syntaxhighlight lang="js">		<syntaxhighlight lang="jsx">
	...		...
	class LoginFormik extends React.Component {		class LoginFormik extends React.Component {

2021-07-12T01:28:55Z

Formik Using Components

← Older revision		Revision as of 01:28, 12 July 2021
Line 207:		Line 207:
	==Formik Using Components==		==Formik Using Components==
	This is the example with components. This now been re-implemented using hooks. It does use styled components around the controls which I personally found to be a bit hard to debug.		This is the example with components. This now been re-implemented using hooks. It does use styled components around the controls which I personally found to be a bit hard to debug.
	<syntaxhighlight lang="js">		<syntaxhighlight lang="jsx">
	import React from "react";		import React from "react";
	import styled from "styled-components";		import styled from "styled-components";
Line 345:		Line 345:
	export default LoginFormik;		export default LoginFormik;
	</syntaxhighlight>		</syntaxhighlight>

	=Formik Validation=		=Formik Validation=
	Formik provides two types of validation and they are not a surprise		Formik provides two types of validation and they are not a surprise

2021-07-12T01:28:25Z

Watch with useFrom

← Older revision		Revision as of 01:28, 12 July 2021
Line 158:		Line 158:
	==Watch with useFrom==		==Watch with useFrom==
	This will watch specified inputs and return their values. It is useful for determining what to render.		This will watch specified inputs and return their values. It is useful for determining what to render.
	<syntaxhighlight lang="js">		<syntaxhighlight lang="jsx">
	import React from "react";		import React from "react";
	import { useForm } from "react-hook-form";		import { useForm } from "react-hook-form";

2021-07-12T01:28:09Z

Example

← Older revision		Revision as of 01:28, 12 July 2021
Line 77:		Line 77:
	*Extract value using the reference created in the constructor		*Extract value using the reference created in the constructor
	==Example==		==Example==
	<syntaxhighlight lang="js">		<syntaxhighlight lang="jsx">
	import React from "react";		import React from "react";

Line 107:		Line 107:

	</syntaxhighlight>		</syntaxhighlight>

	==When to Use==		==When to Use==
	*For read-only elements like file input		*For read-only elements like file input

2021-07-12T01:27:52Z

Using React Components

2021-07-12T01:27:37Z

Example using UseState

← Older revision		Revision as of 01:27, 12 July 2021
Line 14:		Line 14:
	*Formats the input data e.g. dates 25-03-2001		*Formats the input data e.g. dates 25-03-2001
	==Example using UseState==		==Example using UseState==
	<syntaxhighlight lang="js">		<syntaxhighlight lang="jsx">
	const [password, setPassword] = useState("");		const [password, setPassword] = useState("");
	...		...
Line 44:		Line 44:
	...		...
	</syntaxhighlight>		</syntaxhighlight>

	==Using React Components==		==Using React Components==
	<syntaxhighlight lang="js">		<syntaxhighlight lang="js">

2021-06-29T13:52:56Z

Using React Hook

← Older revision		Revision as of 13:52, 29 June 2021
Line 109:		Line 109:
	*When using a non-react library		*When using a non-react library
	*To reduce re-rending form in a complex DOM		*To reduce re-rending form in a complex DOM
	==Using ~~React~~ Hook==		==Using useForm Hook==
	*Uses uncontrolled elements		*Uses uncontrolled elements
	*Therefore minimizes re-rendering		*Therefore minimizes re-rendering
	*Works with Controlled components & UI libraries		*Works with Controlled components & UI libraries
	*Provides Validation helpers and support for schema validators		*Provides Validation helpers and support for schema validators

	==Example useForm Hook==		==Example useForm Hook==
	*Import the hook		*Import the hook