-
Notifications
You must be signed in to change notification settings - Fork 47.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
DOM nesting warning is confusing for whitespace (and text in general) #5071
Comments
@spicyj I think this might be a bit advanced to be a good-first-bug. Specifically, we need to handle three general cases:
|
@jimfb Hmmm, looks like something is wrong with master branch (from your above comments and example). The code snippet
with master prints the warning:
But it says Apparently the code on validation part from 0.14 and master are different though: (0.14 branch):
(master)
In this case |
@jimfb The mentioned three cases by you make sense. I had an rough idea for fixing this issue:
Let me know if my thought process is correct or not. |
I could take a guess on these, but I think it would be best if @spicyj could jump in here, as he wrote the validation code and knows it best. |
Thanks, that's a bug, fixed in #5198. |
@spicyj Looks like you have just fixed the Still the warning includes |
@spicyj Ping. |
Yes. |
@spicyj: I thought of doing the fix for this issue, so on this validations line : I thought of changing this to roughly :
I tested it manually in the browser and it works as expected. But the message is getting displayed as (even for text it adds
if we do:
Kindly let me know if the approach taken over here is correct. So that I can go and give a PR. |
@spicyj Ping. |
You can change the signature of validateDOMNesting if you have to. Also, your check for whitespace isn't right: it should only refer to whitespace if all of the text is whitespace, not if there's any whitespace character (which is what you have). |
Looks like this was fixed in #5753 ? Was thinking of picking it up, but upon investigation, it appears fixed and maybe this can be closed. |
We don't explicitly call out whitespace but yeah, hopefully this is clear enough now. |
I'm getting whitespace in here somehow: <table className="billing-table">
<tbody>{data.billing_type && <tr>
{data.billing_type === 'HOURLY'
&& <td className="name"><strong>Base:</strong> {kb.formatCurrency(data.hourly_rate)}/hr × {kb.formatHours(data.hours)}</td>}
{data.billing_type === 'FLAT'
&& <td className="name"><strong>Flat Rate</strong></td>}
<td className="amount">{kb.formatCurrency(baseAmount)}</td>
</tr>}{feeList.map(fee => {
return <tr key={fee.key}>
<td className="name">{fee.name}</td>
<td className="amount">{fee.amount}</td>
</tr>
})}<tr>
<td className="name"><strong>Grand Total</strong></td>
<td className="amount"><strong>{kb.formatCurrency(grandTotal)}</strong></td>
</tr>
</tbody>
</table> Rendered output is: <table class="billing-table"><tbody><!-- react-text: 315 --><!-- /react-text --><tr><td class="name">Travel Time #1 SUVS30M</td><td class="amount">$62.50</td></tr><tr><td class="name">GST (12%)</td><td class="amount">$7.50</td></tr><tr><td class="name"><strong>Grand Total</strong></td><td class="amount"><strong>$70.00</strong></td></tr></tbody></table> Where is Edit: Nvm. Sorry guys. Slapping |
@mnpenner I explicitly only use |
I think we can actually relax the warning now since we don't have spans. Certainly for an empty string. |
It took me nearly one hour until I came to this page to know about the actual cause of warning. |
@Ajaybhardwaj7 I had the same issue. Thanks for confirming that I wasn't crazy. React should really consider changing the Error message of |
Okay, #7515 should clarify. |
When a user puts a textnode (whitespace) in an illegal location, our warning complains about a
span
element (because we wrap text - including whitespace - in a span). This is confusing for new users, since there is nospan
present in their code and the introduction of thespan
tag is an implementation detail of React. We should fix the warning to better align with the code the user is looking at.The text was updated successfully, but these errors were encountered: