I have a codesandbox for this question: https://codesandbox.io/s/chakra-modal-input-forked-jelhlr?file=/src/App.jsx
I want to get the filename via the modal, and when the user completes that action, I want to do stuff with that information, in this case I want to make an api request.
Thanks!
EDIT:
I have a form with the following onSubmit:
// 1. prepare data for POST request
const data=prepareData();
// 2. get title for data entry from user
onOpen();
// 3. send data via POST request
const response=await axios.post('route',{title,data})
The way things are, the modal shows at step 2 and without waiting for user input, step 3 occurs. I want to get the title name from the user and then I want step 3 to occur.
I found the package react-modal-promise that does exact this. Works perfectly!
The value of the textbook is saved into the ref titleInputRef.
This means you can access the value of the ref/textbox with the following:
titleInputRef.current.value
To log the value to the console, for example:
console.log(titleInputRef.current.value)
Related
If I want to display many posts in my web application but every post have its own type and I want to display each type in single page so, What's the best method to do that? Is put all all posts in one url and use query string to filter the posts upon the type and display it in the page?
For example : axios.get('/posts?type =sport')
Or I have to put every single type in separate Url
For example: axios.get('/posts/sport')
Also one more question please?
use one reducer to manage every posts or create one reducer for each post type?
you can add a dynamic route to every new type.
Ex:
'/transaction' -> component-1
'/transaction/:type' -> component-any (multiple)
welcome to Stackoverflow!
I can imagine you have a web API of some sort serving a URL /posts. You want to consume that endpoint from your web application, and you are using axios to do that. I can assume you are using JSON to return that data. Correct me if I'm wrong.
Now that the basic information is "clear", what data you serve from the endpoint, and how it is requested from the client is up to you. Do you want to ask the server what types are there first, and then do one AJAX request per type? Ok. Do you want to serve all posts independent of their type? Ok. Do you want to accept POST data in your controller so you can filter the results before returning a response? Ok.
If you are looking for a more specific answer, you must give more details, or specify more. But I hope I could be of help.
Edit: complete answer.
If you want to filter the results, you have to send some additional data in your POST request, in this case, your post type. In axios, this could be done like this:
axios.post('https://example.com/posts', {
type: 'sports'
}).then((data) => {
console.log(data);
});
You can obviously get the "type" value from a select input, other variable, even the current router page. I don't know your exact setup, but you can always come back and ask ;)
THEN, in your API controller you have to get that POST parameter type, and use it to filter the results. Again, I don't know your exact setup, but for MySQL if would be a WHERE statement in your query, or similar.
I am making a web app in which I have a section which has an input field. Anything that is submitted through the input field gets posted to an API. So when you land on that screen you see all the previous inputs made. What I am not able to figure out is and the thing I want to achieve is that when someone submits a new input it doesn't reflect in UI until and unless you go back and come back to the screen. I want that as soon as you send an input the input string should be reflected in the UI. How can this be done using AngularJS?
You have two options, at a very basic level they are:
1) The first is to re-query all the list when the item is saved:
api.save(newPost).then(() => getAllPosts());
2) You can return the recently saved post and add it to the list:
api.save(newPost).then((saved) => $scope.posts.push(saved));
You'll need to handle all the unwrapping (etc) based on how you're making the calls.
I am developing a ReactJs quiz app in which I am having problem with validating the answers that is in the json.
I did this quiz app using react version 16.8 using state components and fetched the json data and stored in state using map function I have the completed the view part, now I started to validate the quiz and I am struggling in that part.
here is the full code:https://codesandbox.io/s/mystifying-firefly-2d2x5
and also ill add my json link: http://myjson.com/kpop9
I want the answer should be validated, and if user clicks the submit button before attempting all the questions it should show that you have unanswered questions and if user clicks submit after attempting all the quiz it should display the total marks that user got.
Replying to your comment from above, here is your sandbox code slightly edited. You can submit an answer at any time and these are the alerts you should see:
When you don't select an answer: Alert with message No nulls
When answer is wrong: Alert with message wrong
When answer is correct: Alert with message correct
Here is your edited sandbox
The solution provided is only example, and should not be treated as a perfect solution, it's only to give you an idea of how this may work (you may still want to implement the bit, when after submitting the last answer, scores are calculated - for that you may want to store scores)
Explanation:
In this example I decided to add selected_answer variable in the index.js that stores currently selected answer on the form.
Next, I created setAnswer function in index.js which accepts a selected answer as parameter and sets the selected_answer in state to whatever is passed in. You are welcome to implement as many checks for the value that is passed in as you want
setAnswer function is then passed to your Answer component, so when the value is changed, it can be saved inside index.js state
Result component receives the index.js state as a prop. This allows it to have access to current question, the array of all questions and currently selected value
Inside Result component there is a validateAnswer function that is triggered when submit button is clicked. Inside that function I use the props.current_question (which is the index of a question) to extract the whole question object from your JSON file. Next I filter over the array of answers from previously created question object, and I extract the one that has is_right set to 1. Finally, I check if the props.selected_answer is empty, and display a message if so. If it isn't, I check if it equals to the value of previously extracted correct answer object. And voila!
As mentioned before, this is not the best solution, but one that works on top of your code without changing much. Please let me know if you have any further questions, but hope that helps a bit.
I am looking for the best way to route between my components in Angular 2. In my application I go from page to page by submitting a form:
Page A displays a form and a submit button to go to next step,
Data filed by the user in page A form are used to call a backend action using ajax,
Page B shows the result of the ajax call and a new form to go to next step (page C)...
At each step the backend can return an error and we either go back to previous page, or display an error page (fatal error).
I see two simple options to do the ajax call:
Component A only displays the form and forward the input parameters to component B. Component B run the ajax call and display the result.
OR component A run the ajax call with the input parameters he has and forward the result to component B for display. In case of error component A redisplay itself.
The problem with option 1 is that in case of error the backend will respond with the page A business model and an error message. Component B will have to forward the result to component A so page A can be redisplayed.
The problem with option 2 is that component A has part of the business logic of component B which is not really good for component encapsulation.
My question is: is there a good design pattern to do this? Should I use an intermediate component for example?
Thank you for your help.
I would move all ajax calls to parent component and keep all the data there too, assuming forms are independent. So workflow would be like this:
cP(arent) go to cA
cA - show form, send data to cP
cP - send A data via ajax, go to cB
cB - show form, send data to cP
cP - (got error for A data), send B data via ajax, go to cC
cC - show form, notify user there was an error with form A, offer user to go back now, or finish step C and do A later, send data to cP
cP - (got fatal error for B data), don't send C data via ajax, save data to localStorage?, tell user to try later...
...etc. It's more user friendly and you can show pages/forms as needed.
If forms depend on each other, I'd still keep the ajax and data in parent, and display them if/when server responds. But I recommend you design them do be independent, or you can play some elevator music while user waits (;
I'm following a tutorial that shows one how to make a chat app with a paging feature but for some reason the code responsible for the Prev page and Next page paging buttons do not work as expected.
Here is the app in a Plunker:
http://embed.plnkr.co/zxp9wcKaMcfM2U0vAJhG/preview
Every time one clicks the Next button, one is supposed to see the next 10 message in the Firebase message object starting from the first one. Keep in mind I have 28 messages in the messages object. So when you click the Next button once, you will see the next 10 messages as expected but when you click it a second time the message list goes blank.
So when I tried to debug this manually I decided to run console.log(lastItem.name) since this seemed to be the critical parameter to get this function to work. So you can see in the console that the first time you click Next, you will see the Firebase ID of -JX7ZlaB0QTa0Z47eu28 logged. That makes sense since it is the name/ID of the last message object in the first 10 that are returned to the page on page load. When you click Next again, we expect to see a similar looking message object name/ID but instead we just see the string messages logged to the console.
So it seems like the pageNext function is jumping up the data tree, from an individual message object to the whole entire messages object. And then when we press Next again we see this error
TypeError: Cannot read property 'name' of undefined
at h.$scope.pageNext (http://run.plnkr.co/plunks/zxp9wcKaMcfM2U0vAJhG/main.js:32:24)
So it looks like it jumps to the root of the data tree I guess which contains nothing. Any idea why this is happening and how to fix it?
Your messages only have a user and text property.
In the pageNextand pageBack methods, where you're getting the error, you're getting the last message and trying to read the name property which doesn't 'exist.
I'm guessing you meant to read the user from the last message?
In your pageNext and pageBack method you're referring to the wrong snapshot.
When I fix that, the plunker works:
messageRef.startAt(null, name).limit(numberOfItems).once('value', function(snapshot) {
snapshot.forEach(function(snapItem) {
var itemVal = snapItem.val();
itemVal.name = snapItem.name(); // was snapshot.name()
messages.push(itemVal);
});
deferred.resolve(messages);
});