DEV Community: Naveen Dinushka

Converting React Forms to Formik and Yup

Naveen Dinushka — Sat, 13 Apr 2024 09:49:54 +0000

Managing form state and validation in React applications can quickly become cumbersome, especially as forms grow in complexity. Here's where Formik and Yup come to the rescue! Formik is a popular form management library that simplifies state handling, while Yup provides a robust schema-based approach to validation. By combining these powerful tools, you can create clean, maintainable, and well-validated React forms.

Step-by-Step Guide

Installation:

Begin by installing Formik and Yup using npm or yarn:

   npm install formik yup

Basic Formik Setup:

Import the Formik component from Formik and wrap your existing form with it. Define an object for initialValues that holds the starting state of your form fields:

   import { Formik } from 'formik';

   function MyForm() {
     return (
       <Formik
         initialValues={{ username: '', password: '' }} // Initial state
       >
         {/* Rest of your form will go here */}
       </Formik>
     );
   }

Creating Fields with Formik:

Replace your standard HTML input elements with Formik's Field component. Set the name prop on Field to match the corresponding key in initialValues:

   <Field type="text" name="username" placeholder="Username" />
   <Field type="password" name="password" placeholder="Password" />

Formik automatically handles form state updates based on user interactions with these fields.

Validation with Yup:

Yup allows you to define validation schemas using methods like object, string, and validation rules. Here's an example schema for username and password:

   import * as Yup from 'yup';

   const validationSchema = Yup.object().shape({
     username: Yup.string().required('Username is required'),
     password: Yup.string().min(6, 'Password must be at least 6 characters').required('Password is required'),
   });

Pass this schema to the validationSchema prop of the Formik component:

   <Formik
     initialValues={{ username: '', password: '' }}
     validationSchema={validationSchema}
     // ...
   >

Handling Form Submission:

Define the onSubmit function within the Formik component. This function receives form data when the form is submitted:

   onSubmit={(values) => {
     console.log(values); // Access username and password from values object
     // Handle form submission logic here (e.g., send data to server)
   }}

Displaying Errors and Touched State:

The Field component provides a meta prop with information about the field's state. Use meta.error to conditionally render error messages:

   {errors.username && touched.username && <div className="error">{errors.username}</div>}
   {errors.password && touched.password && <div className="error">{errors.password}</div>}

Use meta.touched to display validation messages only after a field has been interacted with. This improves the user experience by avoiding overwhelming the user with upfront validation.

Additional Considerations

Custom Components: Create reusable form components that utilize Formik's Field component for better code organization.
Advanced Features: Explore Formik hooks for more granular control, custom validation messages, and handling form submission errors.

Conclusion

Formik and Yup empower you to build robust and user-friendly forms in React. By leveraging their capabilities, you can streamline form management, reduce boilerplate code, and ensure a smooth user experience with clear and effective validation. Refer to the official documentation of Formik https://formik.org/ and Yup https://github.com/jquense/yup for in-depth exploration and advanced use cases.

Absolutely! Here's an enhanced knowledge check section with a variety of question formats to test your Formik and Yup knowledge:

Knowledge Check

Ready to solidify your understanding of Formik and Yup? Take this knowledge check and try answering the questions without peeking at the answers below. Once you've attempted them all, feel free to scroll down to reveal the answers.

Multiple Choice:

Which of the following statements describes a benefit of using Yup for form validation?
- a) Automatic form submission handling
- b) Defining clear and reusable validation rules
- c) Direct integration with browser validation messages
- d) Pre-built validation functions for all form field types
How does Formik handle form state updates in a React application?
- a) Manually using the useState hook for each field
- b) Automatically based on user interactions with Field components
- c) Requiring a separate state management library
- d) By leveraging the browser's built-in form state handling

True or False:

The validationSchema prop in Formik is mandatory for all forms, even if no validation is required.

Fill in the Blank:

When using the Field component from Formik, the ______________ prop on the meta object provides access to validation error messages for that specific field.

Short Answer:

Briefly explain the concept of "touched" state in the context of Formik and Yup, and how it can improve the user experience.

Answers:

Multiple Choice:

b) Defining clear and reusable validation rules
b) Automatically based on user interactions with Field components

True or False:

False. The validationSchema prop is only necessary if you want to implement form validation in your Formik form.

Fill in the Blank:

error

Short Answer:

The "touched" state in Formik and Yup refers to whether a specific form field has been interacted with by the user. This is important for displaying validation messages only after a user has entered or interacted with a field. This improves the user experience by avoiding overwhelming users with upfront validation and providing targeted feedback based on their actions.

Return Largest Numbers in Arrays (freecodecamp notes)

Naveen Dinushka — Mon, 24 Oct 2022 17:06:48 +0000

In this question we are asked to Return Largest Numbers in Arrays.

Tests that we should pass

largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]) should return an array.
largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]]) should return [27, 5, 39, 1001].
largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]]) should return [9, 35, 97, 1000000].
largestOfFour([[17, 23, 25, 12], [25, 7, 34, 48], [4, -10, 18, 21], [-72, -3, -17, -10]]) should return [25, 48, 21, -3].

First answer

function largestOfFour(arr) {

 let maxInSubArr=0
 let newArr=[]

 for(let i=0;i<arr.length;i++){
   for (let j=0;j<arr[i].length;j++){

       if(maxInSubArr<arr[i][j]){
         maxInSubArr=arr[i][j]

       }
   }
   newArr.push(maxInSubArr)
   maxInSubArr=0

 }

  return newArr;
}

Second answer

function largestOfFour(arr) {

 let newArr=[]

 for(let i=0;i<arr.length;i++){

  let maxInSubArr = arr[i][0];

   for (let j=0;j<arr[i].length;j++){

       if(maxInSubArr<arr[i][j]){
         maxInSubArr=arr[i][j]

       }
   }
   newArr.push(maxInSubArr)


 }

  return newArr;
}

Correct Answer is Answer 2, reason being, in the first answer we do not handle negative numbers, we set it to zero initially then reset it to zero once its pushed to return array, however in the second solution we are setting it to the first item in subarray

How to use formData Web API to collect form data

Naveen Dinushka — Wed, 19 Oct 2022 08:47:30 +0000

You are given the following form and asked to complete a simple task to gather data from the form fields

index.html

<div class="container">
  <div class="header"> <h4> Register </h4>
    </div>
<form class="myForm">

  <div class="message">
    <label for="msg">Message</label>
    <textarea id="msg"></textarea>
  </div>
  <div class="contact">
    <label for="name">Name</label>
    <input type="text" id="name">

    <label for="favSong">Your favourite song</label>
    <input type="text" id="favSong">

    <label for="email">Email Address</label>
        <input type="email" id="email"> 
        <label>Choose Image for your profile</label>
        <input type="file" name="profile-image" id="form-profile-image" accept="image/*">
    <button onclick="submitProfile()" >Submit</button>
  </div>
</form>
</div>
<script src="src/index.js"></script>

Task

Using the FormData web API complete the submitProfile() function which will let us send post data of the field values to API URL given below

//index.js

const API_URL = "http://localhost:3000/api/user";

const submitProfile = ()=>{
   //complete the code
}

The example post object should look like this

{
name:"",
msg:"",
email:"",
imageFile:"",
favSong:""
}

Steps to solving this

Assign a variable to the value of the field using getElementByID, for example for name we can something like const name=document.getElementById('name')
Initialize formData() and assign it to a variable 'data'
Append all the values to data variable using .append()
Then use fetch() to post the data object to the API url given.

These steps can be implemented as follows

Complete code for this can be found here https://codesandbox.io/s/shy-moon-n0jdtx?file=/index.js

Finding the longest word in a sentence/string (freecodecampnotes)

Naveen Dinushka — Mon, 17 Oct 2022 08:10:59 +0000

In this exercise we are given the following snippet to find the longest word in the sentence.

findLongestWordLength(str) {

   return maxLen
}

findLongestWordLength("The quick brown fox jumped over the lazy dog");

Below are our attempts

What is the correct answer? Attempt 2 as always, the reason being..

The split function

Modify an Array Stored in an Object (freecodecamp notes)

Naveen Dinushka — Sat, 15 Oct 2022 01:37:11 +0000

So in this particular exercise we are given an user obj as below;

let user = {
  name: 'Kenneth',
  age: 28,
  data: {
    username: 'kennethCodesAllDay',
    joinDate: 'March 26, 2016',
    organization: 'freeCodeCamp',
    friends: [
      'Sam',
      'Kira',
      'Tomo'
    ],
    location: {
      city: 'San Francisco',
      state: 'CA',
      country: 'USA'
    }
  }
};

Exercise

Write a function that adds a new friend to friends array in the user obj
They provide us the following function structure

  function addFriend(userObj, friend) {
       // Only change code below this line

     // Only change code above this line
    }
  console.log(addFriend(user, 'Peter Gregory'));

Correct Answer? Answer 2

In attempt 1 we are returning what push function returns. Push returns the length of the array , instead of the array. Therefore we have to push the new friend and then return the array in the next line separately

Once you add Peter Gregory as a friend, remember to get him some asparagus!

Check the exercise here https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-data-structures/modify-an-array-stored-in-an-object

Iterate through keys of an object using for..in statement (freecodecamp notes)

Naveen Dinushka — Wed, 12 Oct 2022 16:43:06 +0000

In a JSON object we have key and value pairs.

An example would be something like this

var object = {
    key1 : {
        name : 'xxxxxx',
        value : '100.0'
    },
    key2 : {
        name : 'yyyyyyy',
        value : '200.0'
    },
    key3 : {
        name : 'zzzzzz',
        value : '500.0'
    },

Exercise

We have defined a function named 'countOnline(userObj)' , using a for ..in statement within this function loop through the users object passed into the function and return the number of users whose online property is set to 'True' . Example of users object that will be passed to countOnline is shown below

{
  Alan:{
     online:false
   },
  Jeff:{
     online:true
},
   Sarah:{
   online:false
}
}

Attempts


//Attempt 1
function countOnline(userObj){
let count;

  for (let user in users) {
       if (user.online==true)
          count ++

    }

}

//Attempt 2
function countOnline(usersObj) {
  // Only change code below this line
  let count=0;
  for (let user in usersObj){

     if(usersObj[user].online==true){
       count++

     }

  }
  return count

  // Only change code above this line
}

console.log(countOnline(users));

Correct answer?? Attempt 2

1.Attempt 1 did not work because when we do user.online, user will only have the string (ie.Alan, Sarah etc)

2.Attempt 2 worked because we correctly used the syntax to get the online property of each user inside usersObj

Try this out in freecodecamp https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for---in-statement

Check if an Object has a Property (freecodecamp notes)

Naveen Dinushka — Thu, 06 Oct 2022 16:57:25 +0000

So what's the easiest way to check if an object has a property.

Exercise

Finish writing the function so that it returns true if the object passed to it contains all four names, Alan, Jeff, Sarah and Ryan and returns false otherwise.


let users = {
  Alan: {
    age: 27,
    online: true
  },
  Jeff: {
    age: 32,
    online: true
  },
  Sarah: {
    age: 48,
    online: true
  },
  Ryan: {
    age: 19,
    online: true
  }
};

function isEveryoneHere(userObj) {
  // Only change code below this line

  // Only change code above this line
}

Answer


function isEveryoneHere(userObj) {
  // Only change code below this line
  if (userObj.hasOwnProperty('Alan') && 
      userObj.hasOwnProperty('Jeff') && 
      userObj.hasOwnProperty('Sarah') && 
       userObj.hasOwnProperty('Ryan'))
   {

       return true
    }
  else {
    return false
  }
  // Only change code above this line
}

Iterate Through All an Array's Items Using For Loops (freecodecamp notes)

Naveen Dinushka — Sun, 02 Oct 2022 17:07:58 +0000

Original Question -> https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-all-an-arrays-items-using-for-loops

Question

We have defined a function, filteredArray, which takes arr, a nested array, and elem as arguments, and returns a new array. elem represents an element that may or may not be present on one or more of the arrays nested within arr. Modify the function, using a for loop, to return a filtered version of the passed array such that any array nested within arr containing elem has been removed.

function filteredArray(arr, elem) {
  let newArr = [];
  // Only change code below this line

  // Only change code above this line
  return newArr;
}

Things to know before attempting this question

1.How indexOf works ? The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.
2.How to iterate with a for loop
3.How to use .push()

Answer

function filteredArray(arr, elem) {
  let newArr = [];
  // Only change code below this line

   for (let i=0;i<arr.length;i++){
      if(arr[i].indexOf(elem)==-1){
          newArr.push(arr[i])
      }
   }
  // Only change code above this line
  return newArr;
}

Async JS - Callbacks, Promises, Async await

Naveen Dinushka — Sat, 01 Oct 2022 02:15:30 +0000

Disclaimer: This post is based on the video https://www.youtube.com/watch?v=PoRJizFvM7s&t=23s and Joys icecream post https://dev.to/joyshaheb/learn-callbacks-promises-async-await-by-making-ice-cream-4n76

Look at the below code snippet and answer the questions

const posts =[
{title:'post one', body:'This post one'},
{title:'post two',body:'This is post two'}
]
function getPosts(){
  setTimeout(()=>{
  let output ='';
  posts.forEach((post,index)=>{
     output +=`<li> ${post.title},</li>';
});
  document.body.innerHTML = output;},1000);
}
function createPost (post ){
  setTimeout(()=>{
   posts.push(post);

  },2000);
}
getPosts()
createPost({title:'Post Three', body:'This is post three'} );

Questions

1. What would happen if we run the above code? Explain?

We would only see post one and post two printed, we cant get the post three printed as create Post has a delay of 2 seconds and by the time CreatePost is run (in 2 sec) the getPosts function had already completed its execution

2. How can we fix the above, and print three posts by amending the above code snippet?

We can do this by amending the code snippet to call the getposts function inside createPosts , to do this we have to add getPosts function inside createPost, and add a callback as below

function createPost(post,callback) {
 setTimeout(()=>{
  posts.push(post);
 callback();
},2000);
}
 //and then

createPost({title:'Post three', body: 'This is post three'}, getPosts);

3. Using the amended code in (2) above, perform the same with promises instead of callbacks.

function createPost(post) {
  return new Promise((resolve,reject) =>{
    setTimeout(()=> {
      posts.push(post);

      const error = false;

      if(!error){
       resolve();
      } else {
       reject('Error: something went wrong');
    }
},2000);
});
}

createPost({title:'Post three', body:'This is post three'}).then(getPosts).catch(err=> console.log(err));

4. Whats the use of promise.all?

If we have lot of different promises, instead of writing a lot of .then promises we can do promise.all , as below

const promise1 = Promise.resolve('Hellow world')
const promise2 = 10;
const promise3 = new Promise((resolve, reject)=>setTimeout(resolve,2000,'Goodbye'))
const promise4=fetch('https://jsonplaceholder.typicode.com/users').then(res=>res.json());


Promise.all([promise1,promise2,promise3,promise4]).then(
(value)=>console.log(values)
);

5. What is the use of 'async , await' in the context of promises, use async, await to print three posts, 2 from the posts abject , and one manually added, with createPost and getPosts functions.

Example 1

async function init(){

  await createPost({title:'Post three', body:'This is post three'});
  getPosts()
}

init()

so you would see all three posts in the output of the above code, because with the await keyword the createPost would finalize executing before it goes to getPosts()

Example 2 with fetch

async function fetchUsers(){
  const res = await fetch ('https://jsonplaceholder.typicode.com/users');

const data = await res.json()

console.log(data);

}

fetchUsers();

6. Answer the questions based on the program written using async await

function toppings_choice (){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{

      resolve( console.log("which topping would you love?") )

    },3000)
  })
}

async function kitchen(){

  console.log("A")
  console.log("B")
  console.log("C")

  await toppings_choice()

  console.log("D")
  console.log("E")

}

// Trigger the function

kitchen();
console.log("doing the dishes")
console.log("cleaning the tables")
console.log("taking orders")

a. What would be the output and why

The out put of this would look like

output
A
B
C
doing the dishes
cleaning the tables
taking orders
which topping would you love
D
E

This is because execution of kitchen function was paused at toppings_choice() and other console.logs were executed while toppings_choice() was executing in the background and then the rest of the lines in the kitchen function .

b. Whats the key difference between getPosts example and this example?

In the getPosts example the async function we used was init(), it had one promise inside with await keyword, the execution paused at 'CreatePosts' function until it finished executing, however in this example we have multiple functions , which are console.logs, the await function is paused inside the kitchen function while the console.logs outside of the kitchen function are executed.

Getters/Setters to control access to an object (freecodecamp notes)

Naveen Dinushka — Mon, 26 Sep 2022 16:44:31 +0000

Below is an example of a JS Class

class Book {
  constructor(author) {
    this._author = author;
  }
  // getter
  get writer() {
    return this._author;
  }
  // setter
  set writer(updatedAuthor) {
    this._author = updatedAuthor;
  }
}
const novel = new Book('anonymous');
console.log(novel.writer);
novel.writer = 'newAuthor';
console.log(novel.writer);

So here's the exercise se the class keyword to create a Thermostat class. The constructor accepts a Fahrenheit temperature.

In the class, create a getter to obtain the temperature in Celsius and a setter to set the temperature in Celsius.

Remember that C = 5/9 * (F - 32) and F = C * 9.0 / 5 + 32, where F is the value of temperature in Fahrenheit, and C is the value of the same temperature in Celsius.

if you dive into the coding part without reading the question you will probably get it wrong, note that the question says 'obtain the temp in celcius' and 'set the temperature in celcius and with the equation they have given us we can do just that.

// Only change code below this line
class Thermostat{
  constructor(temp){
    this._temp =temp;
  }
  get temperature(){
    return 5/9 * (this._temp - 32)
  }

  set temperature(C){
    this._temp=C * 9.0 / 5 + 32
  }
}
// Only change code above this line

const thermos = new Thermostat(76); // Setting in Fahrenheit scale
let temp = thermos.temperature; // 24.44 in Celsius
thermos.temperature = 26;
temp = thermos.temperature; // 26 in Celsius

Strings using template literals (freecodecamp notes)

Naveen Dinushka — Mon, 26 Sep 2022 00:11:34 +0000

The ES6 Template literals is a new feauture allowing you to create multi-line strings and to use string interpolation features to create strings.

Use template literal syntax with backticks to create an array of list element (li) strings. Each list element's text should be one of the array elements from the failure property on the result object and have a class attribute with the value text-warning. The makeList function should return the array of list item strings.

Use an iterator method (any kind of loop) to get the desired output (shown below).

[
  '<li class="text-warning">no-var</li>',
  '<li class="text-warning">var-on-top</li>',
  '<li class="text-warning">linebreak</li>'
]

As we are asked to use an iterator we will be using the map function, here's a good article for you to check the usage of map in processing arrays https://www.digitalocean.com/community/tutorials/4-uses-of-javascripts-arraymap-you-should-know

With that the exercise we are given is

const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["no-extra-semi", "no-dup-keys"]
};
function makeList(arr) {

  const failureItems //


  return failureItems;
}

const failuresList = makeList(result.failure);

And the answer with a map function in use

const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["no-extra-semi", "no-dup-keys"]
};
function makeList(arr) {
  // Only change code below this line
  const failureItems = arr.map(e=>`<li class="text-warning">${e}</li>`)

  // Only change code above this line

  return failureItems;
}

const failuresList = makeList(result.failure);

Using recursion to count from startNum to endNum (freecodecamp notes)

Naveen Dinushka — Fri, 23 Sep 2022 21:21:35 +0000

In this exercise we are asked to write a function which should return an array of integers which begins with a number represented by the startNum parameter and ends with a number represented by the endNum parameter.

So deriving from the previous example of countup , here is how this would work


function rangeOfNumbers(startNum, endNum) {

  if(startNum>endNum){
    return[]
  }
  const rangeArray=rangeOfNumbers(startNum,(endNum-1))
  rangeArray.push(endNum)

  return rangeArray;
};