[$250] [Dev] Console Warning: Each child in a list should have a unique “key” prop. Check the render method of MoneyRequestConfirmationListFooter #49063

m-natarajan · 2024-09-12T11:36:53Z

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Version Number: 9.0.30-9
Reproducible in staging?: Needs reproduction
Reproducible in production?: Needs reproduction
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @c3024
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1726072632778819?thread_ts=1726072125.690969&cid=C049HHMV9SM

Action Performed:

Logon to ND on iOS App
Go to the self DM page
Start the Track Expense Flow and continue till the confirmation page

Expected Result:

No console warning on the confirmation page

Actual Result:

Console Warning, Each child in a list should have a unique “key” prop.
Check the render method of MoneyRequestConfirmationListFooter

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021834465215371395617
Upwork Job ID: 1834465215371395617
Last Price Increase: 2024-09-13
Automatic offers:

gijoe0295 | Contributor | 103944812

Issue Owner

Current Issue Owner: @parasharrajat

The text was updated successfully, but these errors were encountered:

melvin-bot · 2024-09-12T11:37:05Z

Triggered auto assignment to @RachCHopkins (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

MelvinBot · 2024-09-12T11:37:10Z

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

gijoe0295 · 2024-09-12T22:53:56Z

Edited by proposal-police: This proposal was edited at 2023-11-01T12:00:00Z.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Console Warning, Each child in a list should have a unique “key” prop.
Check the render method of MoneyRequestConfirmationListFooter

What is the root cause of that problem?

In MoneyRequestConfirmationListFooter, we're missing key for the MentionReportContext.Provider which wraps the Description menu item:

App/src/components/MoneyRequestConfirmationListFooter.tsx

Lines 302 to 304 in 57f8c23

    
           <MentionReportContext.Provider value={mentionReportContextValue}> 
        
               <MenuItemWithTopDescription 
        
                   key={translate('common.description')}

What changes do you think we should make in order to solve the problem?

Add key={translate('common.description')} to the MentionReportContext.Provider above.

RachCHopkins · 2024-09-13T04:52:43Z

@m-natarajan can you please outline the exact steps?

Go to the self DM page

What is the self DM page?

Does this mean tap Create, Start Chat and then choose the currently logged in user?

Start the Track Expense Flow and continue till the confirmation page

What is the confirmation page? I can Track an expense, then choose to categorise the expense, code it and save. I don't see anything that says "confirm".

c3024 · 2024-09-13T05:17:20Z

Apologies for the confusion. There were quite a few development warnings/errors I reported so the steps have become too generic.

Here are the exact steps

Log on to New Expensify App on iOS
Press on the Floating Action Button (+)
Press on Track Expense
Switch to the Manual tab
Enter any amount
Press Next

Expected Result:

There should be no console errors or warnings.

Actual Result:

Console Warning:

Each child in a list should have a unique “key” prop.
Check the render method of MoneyRequestConfirmationListFooter

This bug occurs only on development environment and cannot be recreated on staging or production versions of the app.

RachCHopkins · 2024-09-13T05:32:13Z

Ok, sounds like it's not something I can repro, but I trust you @c3024!!

melvin-bot · 2024-09-13T05:32:46Z

Job added to Upwork: https://www.upwork.com/jobs/~021834465215371395617

melvin-bot · 2024-09-13T05:32:53Z

Triggered auto assignment to Contributor-plus team member for initial proposal review - @parasharrajat (External)

nkdengineer · 2024-09-13T07:14:32Z

Proposal

Please re-state the problem that we are trying to solve in this issue.

Console Warning, Each child in a list should have a unique “key” prop.
Check the render method of MoneyRequestConfirmationListFooter

What is the root cause of that problem?

We add the key prop for the child component instead of adding this for the outside

App/src/components/MoneyRequestConfirmationListFooter.tsx

Lines 303 to 304 in 1a43284

    
           <MentionReportContext.Provider value={mentionReportContextValue}> 
        
               <MenuItemWithTopDescription

We also miss adding the key prop for the billable item here

App/src/components/MoneyRequestConfirmationListFooter.tsx

Line 507 in 1a43284

    
           <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8, styles.optionRow]}>

What changes do you think we should make in order to solve the problem?

We should move the key prop to

<MentionReportContext.Provider
    value={mentionReportContextValue}
    key={translate('common.description')}
>
    <MenuItemWithTopDescription

App/src/components/MoneyRequestConfirmationListFooter.tsx

Lines 303 to 304 in 1a43284

    
           <MentionReportContext.Provider value={mentionReportContextValue}> 
        
               <MenuItemWithTopDescription

We also need to add key prop for billable option here to prevent the same bug when the billable is enabled

<View
    style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8, styles.optionRow]}
    key={translate('common.billable')}
>

App/src/components/MoneyRequestConfirmationListFooter.tsx

Line 507 in 1a43284

    
           <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.ml5, styles.mr8, styles.optionRow]}>

What alternative solutions did you explore? (Optional)

parasharrajat · 2024-09-13T07:55:03Z

@gijoe0295 proposal looks good. We should check for all elements in the loop for the key. This distinction alone does not warrant a significant change as it is something that we will check in the PR. This is only the extra point in @nkdengineer proposal.

🎀 👀 🎀 C+ reviewed

melvin-bot · 2024-09-13T07:55:19Z

Triggered auto assignment to @luacmartins, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

melvin-bot · 2024-09-13T12:42:15Z

📣 @gijoe0295 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

RachCHopkins · 2024-09-30T06:03:58Z

Automation is borked, looks like this is pretty much ready for payment. @parasharrajat can you please do the checklist?

The following checklist (instructions) will need to be completed before the issue can be closed:

[@parasharrajat] The PR that introduced the bug has been identified. Link to the PR:
[@parasharrajat] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
[@parasharrajat] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
[@parasharrajat] Determine if we should create a regression test for this bug.
[@parasharrajat] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
[@RachCHopkins ] Link the GH issue for creating/updating the regression test once above steps have been agreed upon

Also, what's our payment date for this one?

parasharrajat · 2024-09-30T17:10:22Z

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@parasharrajat] The PR that introduced the bug has been identified. Link to the PR: #2 - Don't render report mention markdown if it's not a policy report #48140
[@parasharrajat] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/48140/files#r1781484675
[@parasharrajat] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: NA
[@parasharrajat] Determine if we should create a regression test for this bug. Not needed
[@parasharrajat] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Steps

Press FAB > Submit expense
Choose a workspace with Billable enabled
Proceed to confirmation page
Verify Warning: Each child in a list should have a unique “key” prop does not show
Press FAB > Submit expense > Distance > Start
Verify Warning: Invalid prop inbetweenCompo of type boolean supplied ... does not show
Verify Warning: Invalid prop listEmptyComponent of type function supplied ... does not show
Verify Warning: Invalid prop listLoaderComponent of type function supplied ... does not show

Do you agree 👍 or 👎 ?

luacmartins · 2024-09-30T20:24:36Z

I don't think we need a regression test for this specifically. It doesn't really break user functionality.

RachCHopkins · 2024-10-01T03:41:27Z

Ok cool, thanks @luacmartins - I'm also not clear on when this needs to be paid out, so if you can clarify that, that would be wonderful.

gijoe0295 · 2024-10-01T08:05:22Z

@RachCHopkins PR reach production since early Sep 25. Should be ready for payment on Oct 2.

RachCHopkins · 2024-10-03T22:59:59Z

Payment Summary:

Contributor: @gijoe0295 to be paid $250 via Upwork
Contributor+: @parasharrajat to be paid $250 via NewDot manual request

Upwork job here

RachCHopkins · 2024-10-03T23:05:37Z

Contributor has been paid, the contract has been completed, and the Upwork post has been closed.

parasharrajat · 2024-12-12T11:10:47Z

Payment requested as per #49063 (comment)

m-natarajan added Daily KSv2 Needs Reproduction Reproducible steps needed Bug Something is broken. Auto assigns a BugZero manager. labels Sep 12, 2024

melvin-bot bot assigned RachCHopkins Sep 12, 2024

RachCHopkins added the External Added to denote the issue can be worked on by a contributor label Sep 13, 2024

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 13, 2024

melvin-bot bot assigned parasharrajat Sep 13, 2024

RachCHopkins added this to [#whatsnext] #quality Sep 13, 2024

melvin-bot bot assigned luacmartins Sep 13, 2024

luacmartins assigned gijoe0295 Sep 13, 2024

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 13, 2024

muttmuure moved this to LOW in [#whatsnext] #quality Sep 13, 2024

gijoe0295 mentioned this issue Sep 15, 2024

Fix: Unique key warning #49222

Merged

50 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Sep 15, 2024

parasharrajat mentioned this issue Sep 30, 2024

#2 - Don't render report mention markdown if it's not a policy report #48140

Merged

50 tasks

RachCHopkins closed this as completed Oct 3, 2024

github-project-automation bot moved this from LOW to Done in [#whatsnext] #quality Oct 3, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[$250] [Dev] Console Warning: Each child in a list should have a unique “key” prop. Check the render method of MoneyRequestConfirmationListFooter #49063

[$250] [Dev] Console Warning: Each child in a list should have a unique “key” prop. Check the render method of MoneyRequestConfirmationListFooter #49063

m-natarajan commented Sep 12, 2024 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Sep 12, 2024

MelvinBot commented Sep 12, 2024

gijoe0295 commented Sep 12, 2024 •

edited by github-actions bot

Loading

RachCHopkins commented Sep 13, 2024 •

edited

Loading

c3024 commented Sep 13, 2024 •

edited

Loading

RachCHopkins commented Sep 13, 2024

melvin-bot bot commented Sep 13, 2024

melvin-bot bot commented Sep 13, 2024

nkdengineer commented Sep 13, 2024

parasharrajat commented Sep 13, 2024

melvin-bot bot commented Sep 13, 2024

melvin-bot bot commented Sep 13, 2024

RachCHopkins commented Sep 30, 2024

parasharrajat commented Sep 30, 2024

luacmartins commented Sep 30, 2024

RachCHopkins commented Oct 1, 2024

gijoe0295 commented Oct 1, 2024 •

edited

Loading

RachCHopkins commented Oct 3, 2024

RachCHopkins commented Oct 3, 2024

parasharrajat commented Dec 12, 2024

[$250] [Dev] Console Warning: Each child in a list should have a unique “key” prop. Check the render method of MoneyRequestConfirmationListFooter #49063

[$250] [Dev] Console Warning: Each child in a list should have a unique “key” prop. Check the render method of MoneyRequestConfirmationListFooter #49063

Comments

m-natarajan commented Sep 12, 2024 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Sep 12, 2024

MelvinBot commented Sep 12, 2024

gijoe0295 commented Sep 12, 2024 • edited by github-actions bot Loading

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

RachCHopkins commented Sep 13, 2024 • edited Loading

c3024 commented Sep 13, 2024 • edited Loading

Expected Result:

Actual Result:

RachCHopkins commented Sep 13, 2024

melvin-bot bot commented Sep 13, 2024

melvin-bot bot commented Sep 13, 2024

nkdengineer commented Sep 13, 2024

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

parasharrajat commented Sep 13, 2024

melvin-bot bot commented Sep 13, 2024

melvin-bot bot commented Sep 13, 2024

RachCHopkins commented Sep 30, 2024

parasharrajat commented Sep 30, 2024

Regression Test Steps

luacmartins commented Sep 30, 2024

RachCHopkins commented Oct 1, 2024

gijoe0295 commented Oct 1, 2024 • edited Loading

RachCHopkins commented Oct 3, 2024

RachCHopkins commented Oct 3, 2024

parasharrajat commented Dec 12, 2024

m-natarajan commented Sep 12, 2024 •

edited by melvin-bot bot

Loading

gijoe0295 commented Sep 12, 2024 •

edited by github-actions bot

Loading

RachCHopkins commented Sep 13, 2024 •

edited

Loading

c3024 commented Sep 13, 2024 •

edited

Loading

gijoe0295 commented Oct 1, 2024 •

edited

Loading