Is it possible to send data through Component in react js.
I have a react component: On load of this component I have an api call and get a response, on this component I have this
Go to Next Page
On this Next page load I need some data from response of my previous component - how do I send it? is there a way to do this in react?
If you are using any kind of state management framework such as redux or flux, you can set the data in the store once the api call is fullfilled (on your first page, ie the one with the Go to next page link). Now on the next Page, you will have the data you need in the store which you can retrieve and do whatever you want with.
Related
I am trying to merge surveyjs along with my NativeScript application. I have referred URL for merging the same with Angular application
From the Angular demo code given on website, we have to add event handler for Complete button where we can get the response from surveyjs. Is it possible to integrate similarly for Nativescript Mobile application? Here is the approach which i feel can be taken.
Display
Create a HTML as provided by SurveyJS with required CSS and JS
referenced and add them as a file in project.
Modify HTML once i get the survey question json back from server.
Show the HTML as part of WebView. This will take care of displaying
the survey on my Application.
Here are my challenges during Submission
As per the process given on SurveyJS, i need to add handler for
oncomplete which will get the result json for me. How can i add
handlers for Complete button click in my code? Also please note that
there is a possibility that there may be multiple surveys on a single
page.
Apart from Survey, there are other fields also on the page and user
will submit them all in one go by clicking submit button of the page.
Hence i am planning to hide Complete button provided by SurveyJS
page. This needs to be triggered via code. Can this be done?
If someone can give directions on whether this scenario can be handled in nativescript application with Angular,it would help immensely.
yes it can be done using nativescript-webview-interface plugin.
add jS code inside WebView to handle oncomplete event from surveyJS. and on that function call emit some event to native app. after that add nativescript code to listen for that event and get the JSON back.
inside webView JS function
var oWebViewInterface = window.nsWebViewInterface;
// emit event to native app
oWebViewInterface.emit('anyEvent', jsonData);
inside native App
oWebViewInterface.on('anyEvent', function(jsonData){
// perform action on event
});
for more details on this you can check plugin readme file https://github.com/shripalsoni04/nativescript-webview-interface
I've got a component that downloads data from an API. When the user clicks Search, the content from the API is fetched via AJAX. This content from the API is in JSON and has got an ID of the product inside. I am able to create new HTML elements based on this content and put them inside my site, but I would like every created on the fly element to have routerLink="/detailsPage/itemID" working, so that after clicking it would route to detailsPage with apropriate ID. How to do it in the most simple way? I assume some recompiling of refreshing is needed.
The answer to this question is HTTPClient - Angular offers it as an easier way to use XMLHttpRequest (AJAX) in Angular applications, and using it also makes sure that routerLink or any other Angular directives will work on objects created dynamically with this method.
Angular - HTTPClient
Is it possible with gatsby to render some external data server side to have prepopulated content when accessing page with browser?
Lets assume i have a public api endpoint like this: http://jsonplaceholder.typicode.com/posts
I want data from such endpoint rendered also server side.
Current behaviour:
Currently when doing axios get calls in my component(constructor or componentDidMount) im able to see data downloaded and rendered fully client side
Expected result
I want to be able to call external data in react component (maybe marking with async/await) to have it rendered after ajax call wil be finished.
I found something regarding graphQL(iam not familiar with it) that it is able to query data also for server side rendering.
But how to achieve my needs using simple text/json response from external endpoint?
If a plugin exists to pull data from your source of choice, then you can pull it in and use GraphQL to query it.
https://www.gatsbyjs.org/docs/plugins/
If it doesn't, you'll want to write a plugin to pull data or use the sourceNodes API in your gatsby-node.js file.
https://www.gatsbyjs.org/docs/node-apis/#sourceNodes
With jQuery, I can attach an event handler function via the on method that will be triggered also when the DOM change and something (like an Ajax call) replace the HTML of the page.
Is it possible to do something similar with a React component? After an ajax call that changes the DOM, if an element with a specific class is found, render it (with ReactDOM.render(...)).
Thanks
The component render responsibility should be given to react. Hence you should store the response from ajax call in the current state and react will handle the component rendering based on current state.
Follow these APIs if you are using only react
https://facebook.github.io/react/docs/component-api.html
or follow connect() if you are writing in react-redux
Reading the Ember guide about the data store it's not clear how you pre-populate the store with your data. I see you can set up the RESTadapter with the host name, and the 'store.find' method will trigger a 'get' request if the data is not cached, but how can I initialize a DS.Store with JSON data via ajax before ever doing a find?
Ember guide model HTTP
The context for this is, a single page app that on page load gets a blob of json, which is used to model out the rest of the site. The end result gives the illusion that the site contains multiple pages.
Sounds like you want this.store.pushPayload(..)
http://emberjs.com/api/data/classes/DS.Store.html#method_pushPayload
Note that you only have access to the store inside Routes and Controllers. Consider putting this inside the activate hook of App.ApplicationRoute
http://emberjs.com/guides/routing/defining-your-routes/#toc_initial-routes
http://emberjs.com/api/classes/Ember.Route.html#method_activate