Formik is a library that makes form handling in React apps easy.
In this article, we’ll look at how to handle form inputs with Formik
We can use the useField
hook to create our own text fields that work with Formik.
For instance, we can write:
import React from "react";
import { useField, Form, Formik } from "formik";const MyTextField = ({ label, ...props }) => {
const [field, meta] = useField(props);
return (
<>
<label>
{label}
<input {...field} {...props} />
</label>
{meta.touched && meta.error ? (
<div className="error">{meta.error}</div>
) : null}
</>
);
};export const FormExample = ()…
If we prefer to use classes, we can use the class-based components API that comes with Vue.
In this article, we’ll look at how to developing Vue apps with class-based components.
We can add props and inherit superclass components with the mixins
method in our Vue TypeScript project.
For instance, we can write:
<template>
<div>
<p>{{ message }}</p>
</div>
</template><script lang="ts">
import Vue from "vue";
import Component, { mixins } from "vue-class-component";const GreetingProps = Vue.extend({
props: {
name: String,
},
});@Component
class Super extends Vue {
lastName = "smith";
}@Component export default class HelloWorld extends mixins(GreetingProps…
Throttling and debouncing let us slow down the running of code in different ways.
Debounce means we run a piece of code after a given timeout interval.
Throttling means that we don’t let a piece of code run more than one in a given period.
In this article, we’ll look at how to add throttle and denounce to our React components created with React hooks.
We can run a piece of code once after a given time interval by adding a timer to throttle the number of times a piece of code runs within a period.
For example, we can…
React is an easy to use JavaScript framework that lets us create front end apps.
In this article, we’ll look at how to create a grocery list app with React and JavaScript.
We can create the React project with Create React App.
To install it, we run:
npx create-react-app grocery-list
with NPM to create our React project.
We need the uuid
to let us create unique IDs for our to-do items easily.
To add it, we run:
npm i uuidv4
To create the grocery list app, we write:
import { useState } from "react"; import { v4 as uuidv4 }…
Formik is a library that makes form handling in React apps easy.
In this article, we’ll look at how to handle form inputs with Formik
We can set one field’s value based on a value of another field.
For instance, we can write:
import React from "react";
import { Formik, Field, Form, useField, useFormikContext } from "formik";const MyField = (props) => {
const {
values: { textA },
touched,
setFieldValue
} = useFormikContext();
const [field, meta] = useField(props); React.useEffect(() => {
if (textA.trim() !== "" && touched.textA) {
setFieldValue(props.name, `textA: ${textA}`);
}
}, [textA, touched.textA, setFieldValue, props.name]); return…
The useCallback
and useMemo
hooks are 2 more advanced hooks that are added in addition to the basic useState
and useEffect
hooks.
They’re both useful in different ways.
In this article, we’ll look at how to use the useCallback
and useMemo
hooks in our React components.
useCallback
The useCallback
hook is used for memoizing callbacks that we may call multiple times.
Using the useCallback
hook, we can cache callbacks that are in a component so that they won’t be created more than once unless a state or prop changes.
For instance, instead of writing:
import React from "react";export default function…
React is an easy to use JavaScript framework that lets us create front end apps.
In this article, we’ll look at how to create a to-do list app with React and JavaScript.
We can create the React project with Create React App.
To install it, we run:
npx create-react-app todo-list
with NPM to create our React project.
We need the uuid
to let us create unique IDs for our to-do items easily.
To add it, we run:
npm i uuidv4
To create the to-do list app, we write:
import { useState } from "react"; import { v4 as uuidv4 }…
If we prefer to use classes, we can use the class-based components API that comes with Vue.
In this article, we’ll look at how to developing Vue apps with class-based components.
We can create mixins for Vue class-based components with the mixins
function.
For instance, we can write:
<template>
<div>
<p>{{ hello }} {{ world }}</p>
</div>
</template><script>
import Vue from "vue";
import Component, { mixins } from "vue-class-component";@Component
class Hello extends Vue {
hello = "Hello";
}@Component
class World extends Vue {
world = "World";
}@Component export default class HelloWorld extends mixins(Hello, World) { created()…
Formik is a library that makes form handling in React apps easy.
In this article, we’ll look at how to handle form inputs with Formik.
We can bind checkbox values to states with Formik.
For instance, we can write:
import React from "react";
import { Formik, Form, Field } from "formik";export const FormExample = () => (
<div>
<Formik
initialValues={{
toggle: false,
checked: []
}}
onSubmit={(values) => {
alert(JSON.stringify(values, null, 2));
}}
>
{({ values }) => (
<Form>
<label>
<Field type="checkbox" name="toggle" />
{`${values.toggle}`} …
In class-based React components, we can pass a callback into the 2nd argument of setState
to run code when a state is updated with setState
.
With React hooks, we no longer have the setState
method.
Instead, we use state updater functions created with the useState
hook to update states.
This means we’ve to find new ways to run code after a state is updated.
In this article, we’ll look at how to run async code after a state is updated in function components created with React hooks.
The useEffect
hook lets us commit side effects in our component code.
…
Web developer. Subscribe to my email list now at https://thewebdev.info/subscribe/. Email me at hohanga@gmail.com