[Frontend] Some console errors fixes on settings page #5080
Conversation
| {...fieldToTextField(props)} | ||
| {...otherProps} | ||
| value={value ?? ''} |
There was a problem hiding this comment.
Reason: value can be null. But an input should not be initialized with null or undefined value, instead use an empty string. By so, React can properly track changes with the input.
| value={field.value} | ||
| value={field.value ?? ''} |
There was a problem hiding this comment.
Reason: value can be null. But an input should not be initialized with null or undefined value, instead use an empty string. By so, React can properly track changes with the input.
| {...fieldToSelect(props)} | ||
| {...otherProps} | ||
| value={value ?? ''} |
There was a problem hiding this comment.
Reason: value can be null. But an input should not be initialized with null or undefined value, instead use an empty string. By so, React can properly track changes with the input.
| {...fieldToTextField(props)} | ||
| {...otherProps} | ||
| value={value ?? ''} |
There was a problem hiding this comment.
Reason: value can be null. But an input should not be initialized with null or undefined value, instead use an empty string. By so, React can properly track changes with the input.
| settings.platform_cluster.instances_number | ||
| `${settings.platform_cluster.instances_number}` |
There was a problem hiding this comment.
Reason: neutralLabel accepts a string and not a number
| return <div key="none" />; | ||
| return <div key={i} />; |
There was a problem hiding this comment.
Reason: always set a unique key to elements inside a loop. By so, React can correctly track each individual element.
There was a problem hiding this comment.
could you find something based on the data ? edge.node.id maybe ?
Using index is a last-resort strategy that can lead to issues (see https://robinpokorny.com/blog/index-as-a-key-is-an-anti-pattern/)
There was a problem hiding this comment.
Well, this return is called when the data inside the map is undefined, so I can't really use any stuff linked to the data
| <ListItem style={{ paddingLeft: 0 }}> | ||
| <ListItemIcon> | ||
| <Skeleton | ||
| animation="wave" | ||
| variant="circular" | ||
| width={30} | ||
| height={30} | ||
| /> | ||
| </ListItemIcon> | ||
| <ListItemText | ||
| primary={ | ||
| <div> | ||
| {Object.values(dataColumns).map((value) => ( | ||
| <div | ||
| key={value.label} | ||
| className={classes.bodyItem} | ||
| style={{ width: value.width }} | ||
| > | ||
| <Skeleton | ||
| animation="wave" | ||
| variant="rectangular" | ||
| width="90%" | ||
| height={20} | ||
| /> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| } | ||
| <ListItemIcon> | ||
| <Skeleton | ||
| animation="wave" | ||
| variant="circular" | ||
| width={30} | ||
| height={30} | ||
| /> | ||
| <ListItemIcon> | ||
| <KeyboardArrowRightOutlined /> | ||
| </ListItemIcon> | ||
| </ListItem> | ||
| </ListItemIcon> | ||
| <ListItemText | ||
| primary={ | ||
| <div> | ||
| {Object.values(dataColumns).map((value) => ( | ||
| <div | ||
| key={value.label} | ||
| className={classes.bodyItem} | ||
| style={{ width: value.width }} | ||
| > | ||
| <Skeleton | ||
| animation="wave" | ||
| variant="rectangular" | ||
| width="90%" | ||
| height={20} | ||
| /> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| } | ||
| /> |
There was a problem hiding this comment.
Just removed the imbricated ListItem as it was not required.
Reason: li inside li was generated.
lndrtrbn
changed the title
Proposed changes
Related issues
Checklist