So I've been working on making a Recipe App on react. I've taken data for this app from https://www.themealdb.com/api.php on this site. I've been able to show Meal Names by search and also if I want to specific details about a meal I've been also able to do it but in this API there's a complex piece of data which show all the ingredients and measurement. I've tried for a long time but couldn't able show the measurements and ingredients of the meal. I am attaching the response of the ingredients and measurements.
As you can see there are null values in both Ingredients and Measure. I can show both of these if I call them by numbers for ex - strIngredient1,strIngredient2, and so on. What I want I do is I will take all the Ingredients and Measure and whenever there is a null or empty string it will not show it in the details of a specific meal. How can I do it using React Hooks?
This doesn't really have anything to do with React.
You can test for a truthy (something that resolves to true) in JS with the following:
if (x) { }
Empty strings will not get into that, neither will undefined or null. Just check each value to see if you should add it to the UI and you'll be good.
Related
So here is some background info for context on my question.
There is a form that depending on a certain response you can go one of two ways on the form. A or B. on both A and B routes they both share the same navbar except for the phone number portion.
the phone number comes from an API response that has a dynamic number. Depending on if the form is on a A or B route there are certain parameters that are different in the API call that return a number. (ex: id, or a block number from a parameter in the api call).
So we accomplished this before by making two navbars and based on a parameter we would push in the url would make it choose if it was the navbar for route A or B. But since the navbar would be re-rendered every step the api would be called every-time they entered a new step.
My initial thought process would be to create two useEffects in the Navbar.jsx component and set states for A and B api calls right off the bat. and then pass those as props in the App.js file. and set the default to A data until we reach the dynamic part of the form, and once that question is answered then we switch the Navbar properties to B if B was the choice. But im not sure exaclty how to accomplish this or if this is even the correct way to go about this!
If you need anymore information or would like some code examples to better understand, i can add those as edits. Thank you in advance!
I'm trying to build a simple webapp that will have a list of patients, displaying their vital signals values (such as heart rate, spo2 levels, etc...): Im using react for the frontend and Im trying to use setInterval to update said values periodically. However Im having some trouble with that, the list of patients in state is updated, but the new values are not displaying.
I already tried something similar, just like below and this one works fine, so im really clueless about what the problem might be:
Edit: I can see that the state is updated in the console.log, I just cant get those values to be displayed on the screen each second
As you are getting patients details from api already you can directly update state like this, no need to maintain separate array for that.
.then(res=>{
this.setState({patients: res.data.patient})
})
While I was messing with routing in Angular, I tried using an in memory database to fetch the heroes.
The original StackBlitz is https://stackblitz.com/angular/yoerxnmrbod
If you go to the heroes tab, click on a hero, and change his name, the change is reflected in the list.
I changed how the data is backed to be the angular in memory database.
https://stackblitz.com/edit/angular-ke7pxn-vxp9hi?file=src/app/app.module.ts
If you follow the same workflow as the above, the name change in the details component isn't reflected in the list. What am I missing to get the same functionality?
It seems that the reason is when you set HEROES as const in hero.service and then pass a separate hero and change his name, the name is changed in your HEROES array element (because it's an array of objects, and even if it is const, it's elements and their properties can be changed). And in the second realization, you always get a new instance of heroes array. If you want to save some changes to it, you should store it in your service and use like a simple array (without async pipe) and not receive it from your mock-backend each time.
I'm trying to create a very basic key-based translation system since our system doesn't have to be as expansive as something like vuei18n. I'm simply loading a json with a key and each key has four translations. About a hundred items in total. Now; I'm using a seperate Translator window component that I link to Vue like this;
Vue.prototype.translate = function(key){
window.addEventListener('switchedLanguage', function(event) {
console.log(event.detail);
return window.translator.getTranslation(key);
});
return window.translator.getTranslation(key);
}
and in order to render them in the templates I do the following:
{{ translate('key') }}
I understand that connecting scripts like a translator directly to the window isn't the best of practices, but is what's working in the application right now.
The thinking behind it is that when the language is changed within the translator, it will try to get back the key. While this technically works, in the application I am not seeing the keys get re-rendered to the different language. I've been deep down the rabbit hole now and don't seem to get a clear answer why except for the fact that it's not bound to the data model. But for some of the components, they can have up to fifteen keys or more depending on input. It's not feasible to store all the keys in the data model of each component since that will, in my view, unnecessarily clutter the data model.
So, what I've tried so far is the following:
Use a filter with the key as an input (this results in Vue freaking the hell out because it can't resolve the filter since it isn't able to find the translator through Window.translator)
Reload the entire window (while working, very ugly solution since it takes the user back to the main screen)
I have been using the facebook APIs to create custom opengraph objects with the Web api. I have been successful using the built-in actions and objects, like "news.reads" and "article", but I want to create my own action and object instead.
I have created a custom object and custom action for that object through the developers.facebook.com apps interface (I created an app and created a custom object and custom action). We'll call the action "eats" and the object "bananas" for now.
I create both of these in the interface, go back to my code, and replace with these values. However, when the share dialog pops up, it gives the error "There needs to exist at least one story for username:eats."
I went to the Stories tab on the Open Graph page of the app interface and created a custom story with my custom type and custom object. I went back to my site, same error.
Are these the "stories" this error is speaking of? It seemed to make sense to me, but nothing has changed since I have created one of the stories they spoke of. Does anyone have an idea of how to solve the "There needs to exist at least one story for username:action" error?
Because my code worked before with built-in actions and objects, I'm pretty sure it's something to do with this story they keep speaking of. There's been talk of needing to go through the review process, but I am assuming that only has to do with wanting to push something live, right? I'm content to test for now.
I got this error because I was providing the object ID as a parameter for the action's variable name (which corresponds to the object), but I also needed to provide the object ID as another parameter.
So, I had to supply the same object ID twice as two separate parameters, one for the action object name and one for the story object name (the name of the story parameter was the name of the object type).
My parameters thus looked like:
[actionVariableNameForObject] = [objectID]
[objectTypeName] = [objectID]
This was on iOS though so the above is pseudocode
not guaranteed to help, but when I got this error, I had to open "bananas", save it (without changing anything), do the same for "eat", rinse and repeat with the story itself. After that it worked for me.