Add/Edit row in table using react and redux - reactjs

I’m new to react&redux and trying to build app using react-redux and I need help. When I click on add new person the form shows up, when I fill the form and click save button the values from the form (name, job title, phone, birthday) should be added to the table, and operations are always the same for everything(the value of operations row is "default" two buttons edit and delete ). I try to create reducer that will get the values from the form and add it to the table but I didn't achieve that. I don’t know how to define reducer so that happened when I click save button. Can someone help me how to solve this? Thank you. Here is the link of the project.
https://codesandbox.io/s/condescending-hill-0xiht

Related

How to dynamically add a new form step to react multi-page form for each selected item on the first page?

I need a bit of direction. I'm working on an application with React, Typescript, and Material UI. I've created a simple modal. The first page contains an MUI DataGrid with checkSelection enabled. The User can select as many options as appear on the table.
Now, for each selection, the User will then have a new form step to complete. So, if the User selects 5 items from the table, they will then see 5 corresponding steps. The form steps are tied to the selection. So, if the first selection is a menu item, for example, then the next step in the form will be about that menu item, with fields to add to that item.
I've been searching for a similar solution and haven't found one. I'm hoping that someone can point me in the right direction or has some sources they can recommend.
Much appreciated.

selected item of dropDownSelectTree disappeared when create button in TabbedForm(React admin) change

I am working with react admin and I am using TabbedForm to add data, the problem is that when I select item from dropDownSelectTree, and then add text to TextInput, the create button change from disable to able and my selected itemed disappeared, I want to know how to keep my selected items when the button change.
This could be a lot of things from incorrect state handling to incorrect props setup. However, without the actual code to check not many people will be able to help you out. So if you may, share your code with us.

React formik multiple select issue on Reinitialize data value on empty

I am using react formik and react-select, In the form I have issue when click load data button the values are not bind in the select field they are set as empty Please help us.
codesandbox:https://codesandbox.io/s/busy-paper-3eqxp?file=/src/RegisterForm.js:707-719
Thank for Help
Refer to my fork based on your example.
https://codesandbox.io/s/admiring-austin-elj6q?file=/src/RegisterForm.js
A small trick here, you have to resetForm if you want to click load button a second time.

how to control list of timepickers in antd?

I have a list of time pickers in my application to let the user chose the opening times for his store, so he can chose from_time,to_time and the day as shown in the picture.
the problem is i want to control this list so i can add a new time, delete, modify
I am using Antd V3.
I'm not sure if I got your question, but here is what I have got
https://codesandbox.io/s/nice-curran-kkx10
by the way, that snippet could help you to understand the use case of keys with list in React.

how to fix validate some values in material ui table in reactjs and to validate some newly added table values

I'm doing a mini task on React.js in that I have used material UI table and gave values through states and I wrote a onChange handler to edit that states.
If I click edit button all the states are changed to empty and if I click a new button new table is adding but I cant validate it, so how do I validate for the new tables and for the existing ones?
You can see my code here.
I expected output should be if i click name only it should change name but not all fields and if click add new table should be added and that should be validated.
Upon Analyzing the code, updated the fixes in the code sandbox. We need to update state when clicking 'edit' and '+' icon.
https://codesandbox.io/s/still-water-rpwnl

Resources