I'm developing about questions with step by step and I got bug on radio button with param "checked" in reactjs
Problem: the user can next question and back old question, the problem when I stored data on state that user checked radio button, I mean the question has 4 options and user choose option 2 and click next question but user want to back old question then I need to checked option that user choose on step 1, but when I want to choose another option then the old checked don't disappear, can you read my code below?
My code handled like this
Anyone had saw this problem before?
The example on below
when I choose 1 options and next
when I clicked previous button and choose another radio
Related
I am creating a quiz app with next js. I have two buttons (next and previous).I select a answer of question from radio button. But when I go to next question and select the answer and then go to the previous question, the selected value of radio button gets unchecked. How can I keep selected that value.How can I get selected value when redirect between next and previous questions?
The problem you are facing is common in ReactJs development. You have to save the state, when navigating to a new page, otherwise it is discarded. Two possible solutions are using Redux or the built in useContext.
Hi every one hope you're doing good,
I'd like to update my state with radio buttons that I generate dynamicaly.
my state is an array of objects, each object contains one question and 2 or more answer options,
each answer option is a radio button and by clicking it it will update one of the properties of the object.
I'm putting a link to get to the code, you'll be able to make changes and test them (but would not be saved)
I'll really appreciate you're help, thanks
https://scrimba.com/scrim/co9a8447a82665e7746ff8dcc
This is user profile settings page: Box
What I would like to do is have the input fields enabled and disable them once the Save button is pressed.
After this operation "edit" button becomes enable and pressing it also the input fields return enabled.
1)Profile Page --> Form readOnly=disabled and "Edit" button=disabled --> Fill in form --> Save --> Form readOnly=enabledand "Edit" button=enabled.
When a user save his info:
2)Form readOnly=enabled and "Edit" button=enabled --> Click "Edit" button ---> Form readOnly=disabled and "Save" button=enabled --> fill in form...
I reread the whole guide on reactjs.org but I can't solve the problem starting from the theory. Without practical examples I can't learn and I haven't found any by googling.
I've replicated your desired functionality in a code sandbox and added comments to help you understand what is going on.
Please take a look here: https://codesandbox.io/s/youthful-rain-7nqwq?file=/src/Form.js
Let me know if you have any questions.
How to have read-only vs editing state:
You just need to have state to determine if you're editing or not, say isEditing - then set the fields disabled based on it. (Or swap the fields out for plain text displays or whatever)
The edit button would set isEditing = true, and the save button would set it back to false.
I have made a postback button that appears when a user messages the Facebook page a specific phrase, with 3 options to choose from as a trivia competition:
Option 1
Option 2
Option 3
Users can click an option, they will receive a follow-up message if it's right or wrong. If user clicks the right one, another postback button with question appears to continue, however if user clicks wrong one, just text gets sent that they have lost.
However, they still have the previous postback message that if they lose, they can choose the correct option to continue.
Is there a way to implement that the postback button be overwritten with new postback button, or if already selected an option not able to choose a different one.
You can use Floating Buttons ( Quick Reply ) for this purpose. When any user press floating buttons, the buttons disappear.
You can attach quick reply with your generic template card too.
See more about Quick Replies here: https://developers.facebook.com/docs/messenger-platform/send-messages/quick-replies/
Short description of the problem:
I have a form in which a group of fields in repeated based on an array of objects.
There is a button which pushes an object into the array. So the user can add as many groups as he like one by one.
There is a select box as the first element of this group.
However, upon clicking the button, the select box is opened automatically after the new group appears.
Steps to reproduce:
1. Visit http://52.66.117.243/app-test/ for testing.
2. Scroll down and click on add more button.
3. The new select box for title automatically opens
Chrome in responsive mode is also able to reproduce the problem
I think the issue might be due to the click event passed on to the newly added select box since the position w.r.t screen of the button is occupied by the new select element. However, I cannot be very sure.
Interestingly, a small timeout before adding of the new elements seems to solve the problem.
If the problem is indeed the click event being propagated, can someone be kind enough to explain what is causing it, event bubbling/capturing on the ng-click or something else ?
Thank you.