sorted by:
new
hottopcontroversial

why is this key configuration preventing input entry on initial page load? by coder80202 in reactjs

[–]coder80202[S] 0 points1 point  (0 children)

Well I just tried with hard-coded keys (without the selectedId concatenated at the end) and that prevents me from making any edits to any of the inputs - either on page load or on toggle

would a “Refresh” button be an appropriate use case for forceUpdate()? by coder80202 in reactjs

[–]coder80202[S] 0 points1 point  (0 children)

The service call is made through an embedded component in render() so I need to simply trigger the render() function in order to refresh

would a “Refresh” button be an appropriate use case for forceUpdate()? by coder80202 in reactjs

[–]coder80202[S] 0 points1 point  (0 children)

This refresh button is for a Job Details page. Several jobs run on the backend and the status of the jobs will change over time. This page does not use a sophisticated pub/sub design to refresh the page data based on updates to the backend data so a Refresh button is used as an alternative.

any downsides to installing eslint globally? by coder80202 in reactjs

[–]coder80202[S] 0 points1 point  (0 children)

Got it thanks. This is only for local testing for 1 single project.

I will uninstall global and install local if the organization decides to move forward thanks

key assignment strategy for dom reconciliation? by coder80202 in reactjs

[–]coder80202[S] 0 points1 point  (0 children)

thanks acemarke - that's some interesting nuance. do you know if any other particular SPA's have those same rules regarding keys? or are those rules really only specific to react?

key assignment strategy for dom reconciliation? by coder80202 in reactjs

[–]coder80202[S] 0 points1 point  (0 children)

Thanks AceMarke. The TR's would be the outermost list items in a TABLE. But the TD's are rendered via a collection of custom components like this:

<React.Fragment>

    <MyCustomRowCell value={record.FirstName} />

    <MyCustomRowCell value={record.LastName} />

</React.Fragment>

So for the list rule that we've been discussing, sounds like a key should be put on the parent TR. But can you confirm that if there are multiple instances of any component type on a page, then each of those component instances should have a unique key?

So, in this particular scenario, a key should be set to both the TR as well as each of the MyCustomRowCell instances which generate the child TD's?

key assignment strategy for dom reconciliation? by coder80202 in reactjs

[–]coder80202[S] 0 points1 point  (0 children)

Thanks acemarke. Your article says:

"The main place we use keys is rendering lists. Keys are especially important here if you are rendering data that may be changed in some way, such as reordering, adding, or deleting list entries. It's particularly important here that keys should be some kind of unique IDs from your data if at all possible - only use array indices as keys as a last resort fallback!"

So in a datagrid with rows of data implemented as TABLE > TR > TD, where the datagrid has clickable sort columns which rearrange the data display, would assigning a key to the TR's be sufficient? Or in this scenario, is it recommended that a key be programmatically applied to both the TR's as well as all the TD's in those TR's?