2

I used an ascii art generator and it gave me an output in HTML. I then used a HTML to JSX converter and it gave me an output, which I put in a div in JSX. When it compiles it gives an error of

Syntax error: Invalid identifier @@XSXX. (33:5287) (33:5287)

That line is

<span style={{color: '#000', backgroundColor: '#555'}}>@@XSXX</span>

It only seems to happen on chunks containing '@@'. Does this have some custom behaviour in react (JSX) and how can I fix this? It is not the first chunk.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Westsi
  • 142
  • 2
  • 10
  • Can we see the entire component? Hard to tell with just a line. – kelsny Oct 10 '22 at 14:23
  • The component is 200 lines and at least a million characters. Can I paste that in without it being interpreted as spam? – Westsi Oct 10 '22 at 14:25
  • I do not think it is a React-related problem; please have a look at https://stackoverflow.com/questions/29492333/what-does-at-at-mean-in-es6-javascript – secan Oct 10 '22 at 14:25
  • 1
    You may want to use a binning service like [SourceBin](https://sourceb.in/) and share the link. I think your ASCII art has some special HTML characters like `<` or `>` that confuse the parser. – kelsny Oct 10 '22 at 14:26
  • @secan `@@xxx` is only used in the spec or formal documentation. It's not a thing you can use in JavaScript. – kelsny Oct 10 '22 at 14:27
  • All of the code pasting sites give a file too large error @caTS but this is the raw source code on github. https://raw.githubusercontent.com/Westsi/portfolio/master/src/art.js – Westsi Oct 10 '22 at 14:40
  • 1
    @isherwood I tried with one @ symbol and that did not cause an error. – Westsi Oct 10 '22 at 15:27

1 Answers1

2

When trying to render the jsX like @@XSXX you'll get an

Invalid identifier @@XSXX

You should not render it as jsX, but rather as a string:

<span style={{color: '#000', backgroundColor: '#555'}}>{'@@XSXX'}</span>
0stone0
  • 34,288
  • 4
  • 39
  • 64