390885 (23) [Avatar] Offline
#1
How to understand <span>{[<span>©—“</span>]}</span>?
In section 3.10.1, the paragraph is talking about how to render special characters with variables.
If I want to do so, I need to do something special.
And one of the approaches is to break into multiple strings by outputting an array.
The code example is:
<span>{[<span>&copy;&mdash;&ldquo;</span>]}</span>


Please tell me how to understand the code example and what is the relationship between the code and variables to output.
I feel a little dizzy about that.

If I want to render this span element, browser will display a warning:
Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using <span>. See https://fb.me/react-warning-keys for more information.


Thanks!
390885 (23) [Avatar] Offline
#2
How to understand &lt;span&gt;{[&lt;span&gt;&copy;&mdash;&ldquo;&lt;/span&gt;]}&lt;/span&gt;?
I add key attribute to the span element so that I can avoid the warning.
The code becomes
<span>{[<span key='spanKey'>&copy;&mdash;&ldquo;</span>]}</span>
Azat Mardan (41) [Avatar] Offline
#3
How to understand &lt;span&gt;{[&lt;span&gt;&copy;&mdash;&ldquo;&lt;/span&gt;]}&lt;/span&gt;?
JSX can output arrays, so you make it an array with special chars inside of an element.

---

Azat, author of React Quickly