I'm currently working on a React project where I display cards with informations from an array of Objects, so that their content is dynamic.
Now I would like to implement a like and a dislike counter on each card to vote the articles.
My problem is, how to fix this, so that when I click on (like), that it just ads 1 to that specific card and not in all of them.
Because I'm mapping through the data array.
Look into using the .map method in your JSX. It allows you to iterate through multiple values and you can set your methods to individually mapped elements. Make sure to include a key in the element as well.
Further info:
https://reactjs.org/docs/lists-and-keys.html
Related
I've been recently studying the importance of elements' keys in React and I'm still a little confused about it.
I have this case where there is datagrid component responsible for presenting data in rows. There is implemented sorting, filtering and pagination. I fetch the rows data from api.
And the question is:
How should I properly choose keys for map function elements (rows)?
The thing is that the already fetched row data can change between refreshes (by being edited by other user).
Should I use unique ids for key properties (for instance nanoid) or use row.id?
If I understand it correctly, using row.id would result in no row rerendering for already loaded rows even if some of row data were changed.
On the other hand, using unique ids (like nanoid) would make negative impact on performance while sorting, filtering etc...?
Do I get this right, and how to do this properly then?
I agree to study the key in more details. Here's my understanding.
If I understand it correctly, using row.id would result in no row rerendering for already loaded rows even if some of row data were changed.
This is not true, the purpose of the key is to identify the item location, so when it comes to the reconciliation (convert element into a node), React knows if a node (fiber) can be reused to speed up the update process.
Let's make an example, if initially the the key order is
1 2 3
And somehow after a re-order, it becomes the following in the new update
2 1 3
Then React is guided to use the node with key 1 to update the item. The item is updated, and in this case, to the right place. BTW, React doesn't know by default the order of items, to React, they look all similar ;)
I'm only giving you a basic case. But you can make a guess for other cases, ex. with one key missing, or a new key added.
Keys should always be unique, stable (as mentioned above by Brian), and never manipulated in your code (hence stable).
A unique ID is preferred. I've seen people pass an entire user object as the key. Let along that there might be duplicate users, this could also be an enormous key.
Do not use the index of any array as your key.
Mouse Click anywhere on the page, even blank spot, the data array on the page just resort itself.
I know that click might trigger view change if impure pipe is set but I didn't use any.
So I am really baffled because my development testing is OK. Only the production build has this weird behavior.
I use angular 8. The data on the page is array down from rest endpoint. I simply for loop it like all other pages does. This page is just having a big object as the response and containing 3 big arrays. And I make 3 different list on the page. Each list is also a input for a sub component. Display after sorting.
I know JS sort does not copy. But why only on production build?
I fixed it by removing the pipe which is used to filter the lists. That's it.
But I couldn't explain the cause of it.
The pipe is doing a filter. It filters the list based on some ids which belongs to the data.
A checkbox will trigger the filtering which is *ngIf on the tables row in the template.
I need to find out how to have a search bar that can find other pages on my site. Doing a google search, I can only find the code to create a search bar, and not utilise it. Its features would need to include auto correct and actually going to the page, basically these 2 things combined (https://www.w3schools.com/howto/howto_js_autocomplete.asp and https://www.w3schools.com/howto/howto_js_filter_lists.asp)
In the how to filter/search list example you can just add the urls to the corresponding links like <li>Adele</li>.
And in the how to js autocomplete example it will be a bit different and additional code needs to be written. If the url is the same as the items in the list there would not be an issue, but otherwise you need to make the array of countries into an array of objects so that each object will have the name of the country and the corresponding url. Then in the javascript function you will have to access the components as arr[x].country.
The array of countries should look something like this
`var countries = [{country:"Afghanistan", url:"afghanistan"}, {country:"Albania", url:"albania"},...}.
Then add an onClick event handler in the javascript function.
onClick="location.href=`www.example.com/${arr[x].url}`"
You can use Tipue search for that. It's easy and has many options. Like related links, search description, pagination.
It's very easy to customize, if you know how to use inspect element or javascript.
http://www.tipue.com/search/
I have searched far and wide, I have a long history with Angular and am sorta new to the world of React. I am looking to retrieve a single item at a time from my json file. The data is synced and it loops into render flawlessly. This would be .map(), however I do not wish to display all items in the json at once. I would like to show 1 item, then click through with navigation I have set up to show each one individually. In Angular this is done by doing something like this data[0].item index item displays.
Any ideas? Thank You
I want to create a list using Angular, where the data (say like over 1000 items) is retrieved from the server using JSON call. In my plan, the list will only show x amount of items in the list, and will load x more items into it when the user pull up the list.
So my question here is, how to write the expression for the ng-repeat so that
It will only show x amount of items when first loading the list
It will only load x amount of items when user pulled up the list
I think i read somewhere about ngRepeat being able to do this kind of feature, to limit and control the amount of items shown or loaded onto the list, but i forgot where i read it.
But someone told me that better way of doing this is by limiting the amount of data retrieved when using JSON call rather than letting Angular do it.
So i'm kind of confuse in here.
Take a look at ngInfiniteScroll http://binarymuse.github.io/ngInfiniteScroll/.
Last fall, i want to use a similar solution and ended up there.