React Select with Formik | Formik Select Tutorial

Поделиться
HTML-код
  • Опубликовано: 19 окт 2020
  • In this video, you will learn how to connect react select with formik. This is a formik select tutorial and you will figure out how to control select component with Formik in React.
    I use react select package to build dropdown in react. This library is so powerful to build customizable dropdown in react. Formik is also a good library to create form in react.
    In this formik tutorial, I first talked about how to install both packages. Then I added the react select package to the project and configured it. Then you will see how to add Formik to the project and finally how to connect them together to control your dropdown input with Formik hook.
    You can download the project source code from here: pezeshkzade.com/blog/source-c...
  • НаукаНаука

Комментарии • 21

  • @ReactWithMasoud
    @ReactWithMasoud  Год назад

    You can download the project source code from here: pezeshkzade.com/blog/source-code/

  • @VigilianceAurelious
    @VigilianceAurelious 3 года назад +16

    9:35 Where it actually starts building React Select with Formik. Thanks for the tutorial!

    • @charanraj3891
      @charanraj3891 3 года назад

      Thank you so much for saving my time

  • @naoureskraiem6981
    @naoureskraiem6981 2 года назад

    thanks a lot , after 3 days searching for the solution, finally you've fixed my issue !

  • @RahulKumar-qu1if
    @RahulKumar-qu1if 2 года назад

    This is great I am New to formik and this tutorial help me lot.

  • @AI-Diario
    @AI-Diario 2 года назад

    Just what i needed, thanks.

  • @LuisHerrera-wc4pw
    @LuisHerrera-wc4pw 3 года назад

    pretty useful, thanks a lot!

  • @marcelosaavedra1917
    @marcelosaavedra1917 Год назад

    Awesome, thank you!!

  • @avisterdeveloper1120
    @avisterdeveloper1120 Год назад

    You saved meee! thank you so much.

  • @sonlequang5843
    @sonlequang5843 3 года назад

    Love, thanks

  • @joomarce
    @joomarce Год назад +2

    A better thing to do would be in the CustomSelect component's default value function to change the return options ? options.find(option => option.value === value) : "";
    by
    return options.find((option) => option.value === value) || "";
    so when the form is reset the changes are reflected. Good video greetings!
    this change only works with select that are not multi

  • @user-zp1dv4yh5e
    @user-zp1dv4yh5e Год назад

    Thanks a lot

  • @gokulram5104
    @gokulram5104 3 года назад

    Hey you Many time Thank you so much

  • @LuisHerrera-wc4pw
    @LuisHerrera-wc4pw 3 года назад +2

    "what about using onBlur on React Select and Formik?"
    if anyone wanna know, its the same onChange syntax but using setFieldTouched instead of setFieldValue

  • @value_investing_indonesia
    @value_investing_indonesia 3 года назад +1

    I know about classname but what about the name what do you use it for?

    • @ReactWithMasoud
      @ReactWithMasoud  3 года назад +1

      name is an attribute for input elements in html. The HTML name Attribute is used to specify a name for an element. It is used to reference the form-data after submitting the form or to reference the element in a JavaScript. www.geeksforgeeks.org/html-input-name-attribute/#:~:text=The%20HTML%20name%20Attribute,the%20element%20in%20a%20JavaScript.&text=Attribute%20Values%3A%20It%20contains%20a,of%20the%20element.

    • @value_investing_indonesia
      @value_investing_indonesia 3 года назад +1

      @@ReactWithMasoud ohh.... Thank you

  • @Ozzieyy
    @Ozzieyy 2 года назад

    18 mins tutorial for a select field?

  • @salvation6153
    @salvation6153 2 года назад

    Thanks for the video but the codestyle is a complete mess)