How to pass table data to Array of objects so i can submit the result in Formik? - reactjs

Hello there Hope you doing great,
I have tried to implement an idea which is as follow , but I failed, let me know if you can help me out :
So , there is two textfield inputs type select where the user should select the course and its payment method and add it to the table and he/she could as well add more then one course as well delete if they need to
So the main problem here by the way I am using mui multistep form using formik and I want to submit the content of the table after they finished selecting as an array of objects like every course and its payment method Together
and about the validation should test whether the length of the table is 0 So its gonna return a massage tells you have to select at least one course
enter image description here
enter image description here
enter image description here
enter image description here
enter image description here

Related

How to design an api for nested child component of react js select options

enter image description here
how can i design the api that can help me do CRUD operation.
I want to get the value from every column. But i am facing problem for the select option and input values. I want to edit them also.

User Input Custom Price for Stripe Elementor Widget

enter image description here
I want to let user choose how much price amount want to pay. For that a Text Input will be added, and Using Stripe button we process it.
I tried ACF Plugin but no luck. I need user can input any value and only that much can be processed using stripe. I also tried to use JS to change the value but the value and other meta information are stored in DB I guess.

Salesforce Screen flow search and display record information

I'm working on a screen flow. The idea is to have a lookup component the user can search a contact. Then I would like to display the information from the Contact (Account Name, Contact Name, Number Email) and I would like to be able to have the user update that information if needed. I just stomped on how it can be done. I know it should be able to be pulled from the record ID in some type of way and maybe use an Assignment to display the information. Can someone guide me on a next step or if anyone has an instructional video would be helpful.
Thanks
You wouldn't be able to display the looked up contact's fields on that screen as soon as you populate that field. That would be something only possible in code (aura component or lwc).
What you can do, however is -
Get Record element after that screen element. (Get Contact, where Id = lookupcomponent.recordId)
Then EITHER:
use the new Fields (BETA) option on another screen Fields (BETA)
(this method is easier, doesn't have as much control and is limited on fields, depending on data type, you can use)
add inputs one by one and set the default values Add Fields One By One
(this method allows more control)
Then, you will need an update element. If you used the Fields (BETA) you can just update the record variable. If you did the inputs one by one, you will need to update the contact and set fields individually.
Full Flow Example

What is the best option for International phone number input in React js?

I tried using react-phone-input-2 and react-phone-input components of react, but it does not take # and * as input and also not found effective...
I wanted to creat customized input element that will aslo apply number length validation after selecting country code.
i wanted my output to look like this :
enter image description here

Codename One - Validate only one input at a time

A problem of the Validator class is that it validates all the inputs to which a constraint is added (that means that an error message is shown in not already filled inputs or selected pickers):
Validator val = new Validator();
val.addConstraint(title, new LengthConstraint(2));
val.addConstraint(price, new NumericConstraint(true));
In this example, the validator will show an error for both title and price even if the user didn't entered a price yet.
It would be more intuitive that an error is shown only after the user has given the input, that means to show an error for the price only after that a price is given.
I didn't find a code to implement this behavior.
My first thought was just create a validator which will check if something was modified and add it to the validation chain. However, that would mean the input could be valid if you didn't enter everything.
This is a feature that should be implemented in the rendering logic for this class. In Validator itself. You can file an RFE for that or just implement it in a pull request.

Resources