How to implement addable fields with Formik and React? - javascript

I'm trying to create an addable form like this photo with the help Formik :
But what is the best practice to implement this feature ?
In this case, name and price are textbox, but product categories are different with nested concept !
With this form, user can add a product to multi categories, user can add more fields and set new categories.
Due to the arrows, user must follow steps to set a category item in the last step !
Also user can delete no needed rows ...
I've searched into StackOverflow and Google, but I didn't find any suitable solution.
Thanks

You should use FieldArray.
<FieldArray /> is a component that helps with common array/list manipulations. You pass it a name property with the path to the key within values that holds the relevant array. will then give you access to array helper methods via render props. For convenience, calling these methods will trigger validation and also manage touched for you.
So you will need a initial value that is an array and another to tell what will be the name or the input you want when adding a new field.
If you look at the example in the docs, it's exactly what you need.

Related

VueJS list of various elements

I have tried and tried searching for the specific use-case I am after but alas, came up empty.
It could be that I am searching in the wrong direction, but here is the question:
Say I have an array of objects that contain, among other parameters, a title field and an input type field. With this array I would like to create a dialog from vuetify, in which I dynamically insert the relevant input elements based on the type field. This can be input, radio, checkbox but also something more exotic like cron scheduling.
So one way would be to set a slot in the dialog on where the input fields should come, but this requires coding on the child component which will implement such dialog. I was thinking more of something like a loop over the array of objects and rendering the specific component based on the type field, Something like a switch-case system.
Is this something I can do, and whether it is smart to do ? Would like to hear others opinions about this :)
I think it can be done by creating a huge form that contains everything and not rendering unnecessary elements due to
v-if="inputType.includes('text')"
In this case, you can use text-1, text-2, text-n for rendering multiple form elements with the same types. I don't think adding is possible because even if you manage to add, how do you set the condition, v-modal, event bindings etc.

Creating A Multi-select in React that accepts values not found in dropdown options

I need to create an input on my reactjs application where, I have an array of names populating a select. Here, when a user types a name that does not exit in the array used to populate the select, he should have the option to still tag this username into the selected list( indirectly a new item on the list). Also, the user needs to be able to tag multiple users.
It should work exactly like the Multiselect of react-select Component https://jedwatson.github.io/react-select/ except for the fact that, selected values also accept values which are not part of the dropdown
If there are any existing solutions to this in react, I will really love to take a look at them.
thanks and waiting for your help
Isn't this already supported via the Creatable version of the react-select?

Vue.js disable dynamic binding?

I am wondering if it is possible to disable the dynamic binding for one instance of an attribute that I am displaying.
Let's just say I have something like this that is working with two way binding:
this.$children[0].$data.hits
The implementation here is that I have a vacation website where I want to display the total amount of hits which can be derived from this number.
But this number also work with binding so that when you search it gets updated. I want a single instance that does not get updated and shows me the initial count without changing when a user does search.
Is is easily possible or do I just need to set a separate attribute on my components data?
So hits is just a number? then assign it to another data prop initially, before users can search. it won't be updated.
this.originalHits = this.$children[0].$data.hits

Using Parse.Object type pointers with JavaScript SDK

I'm using parse.com with a cordova based mobile app and I ran into an issue dealing with a list page that has different type of items. For the sake of the example, imgine three types of items- text, image and event.
My solution for this problem was to create three different types of parse classes: Image, Text and Event, Each with it's own special fields, and a Message class that has a pointer data field from type Parse.Object that will contain anyone of the three type of classes.
The problem is I'm not compleley sure on how to make the data field point to an Parse.Object. There's no option for this in Data Browser and, as I understand, in the JS SDK this happens autoamtically the first time you set a value from some type for the field. (e.g If I save Image on data, it'll lock me to use only Image from here on out).
Would love to hear if anyone know how to achive this or, if enyone has different idea for making a list with differetn types of items.
Thanks
This sounds like Single table inheritance pattern here more info. My suggestion is to keep all three classes in one Parse table called Message and in Message table should have field type which will have value for concrete type of your objects. In that way you will query, filter and sort only one table. You can also easily add more objects to this table.
Keeping all objects in one table have pros and cons. Please consider well your decision.

BigCommerce: How to create custom filter?

I want to allow for checkbox-filtering, such that when a particular checkbox is 'checked', the page will only show the items corresponding to that checkbox property.
Example) I want only products that are 'new', so I check the box for new products.
How can I create this kind of a filter in BigCommerce? I have tried the url-api filter, granted I didnt expect it to do much, but I have at least tried it.
I am hoping for some way to 'hide' all other products if they dont fall under that checkbox's property.
You can write some javascript to do this for you, but the main thing you'd need here is to somehow differentiate between product types.
Example: what designates a product as 'new' vs 'old'?
I would be happy to help you write this script to react to the users interaction with checkboxes, but we need some HTMl here for the products themselves in order to have our javascript recognize them.
Can you update your question with some HTML examples of the products or items you want to hide/show based on user interaction with a checkbox selector?

Categories

Resources