Common mistakes to avoid while writing JSX
I have been writing React for a while now and while it is not a must to use JSX, I find that is is easier. JSX looks a lot like HTML so it was really easy for me to pick up the syntax not to mention it’s other advantages like the fact that it allows me to write my javascript code inside what looks like HTML, is type-safe and most of the errors are caught during compilation.
Since starting my React journey, I have made a few mistakes and had my share of errors and what this article tries to do is point out a few of such mistakes to you in the hopes that you avoid the mistakes I made and if it’s possible, have a better time writing JSX and figuring out what is wrong with your code than I did.
I have included all the examples I use on this article to this GitHub repo https://github.com/ada-h/common-jsx-mistakes, if you still have any questions or if you have faced a common issue that I have missed, please do leave a comment below.
Most times I find that when some people want to convert their HTML code to JSX, they go through the hassle of finding every single instance of ‘class’ in their code and changing into “className” and things like that, there is this cool tool I use instead.
If I already have an HTML file that I want to convert to JSX, I use this compiler I found online at https://magic.reactjs.net/htmltojsx.htm. All I have to do is copy my HTML code into space for HTML, decide if I want my component to be a class component or not and voila, I have JSX to use in my component. Fast and easy to use… shhh…it’s our secret.
One of the reasons why I love React is the directness of their error messages even though there are a few that are not as direct. The common mistakes to avoid while writing JSX —
1. Naming convention -
If you are relatively new to React, you might have seen this error hanging around in your console;
Warning: Invalid DOM property `class`. Did you mean `className`?
in div (at hello.js:6)
in Hello (at App.js:9)
in div (at App.js:8)
in App (at src/index.js:7)or this
Warning: Unknown event handler property `onclick`. It will be ignored.
in div (at hello.js:6)
in Hello (at App.js:9)
in div (at App.js:8)
in App (at src/index.js:7)
and with your knowledge of HTML, you might have been more than a little confused. The thing is, JSX is javascript and some unique identifiers such as ‘class’ and ‘for’ are reserved, so in React, ‘class’ become ‘className’ and ‘for’ becomes ‘htmlFor’.
Your actions like the ‘onclick’ and ‘onchange’ are written in camelCase and so becomes ‘onClick’ and ‘onChange’. Once you can decipher the lines where the error is coming from, your console warning logs should clear out and your onClick event should run just fine.
2. Always close your tags!-
I use the visual studio code as my code editor, so once I do not close a tag, I get along with red lines all over the defaulting file, a message on my terminal-
Parsing error: Unterminated JSX contents6 | <div class=’hello’ onclik = {()=> alert(‘hello’)}>
7 | <h1> Hello!
> 8 | </div>
| ^
9 | )
10 | }
11 | }
Sometimes, however, when you have a relatively large file, it could get difficult to find out where you forgot to close the tag.
Always remember, unlike HTML files where you are not required to close an input tag while writing JSX, if you open it, you have to close it.
3. No if-else-statement inside your JSX code —
Remember when I said, “JSX is Javascript”? yea, that’s not entirely true. You can write pretty much almost any javascript code once they are within curly braces. However, if-else statements are a “No”.
Instead, you can use a ternary operator which does pretty much the same thing.
class Hello extends Component {
render(){
var hey = 2
return(
<div>
<h1> Hello! </h1>
{hey == 1 ? ‘Yes’: ‘No’}
</div>
)
}
}If you must have an if-else statement in your code, the best way to do this would be to write it as a function outside your render method. Now when you use it inside your component, it works fine.
class Hello extends Component {ifelseItis(){
let me = ‘precious’
if(me === ‘precious’){
return(<div> Yea!</div>)
}else{
return(<hi> Nah!</hi>)
}
}
render(){
let hey = 2
return(
<div>
<h1> Hello! </h1>
{hey === 1 ? ‘Yes’ : ‘No’}
{this.ifelseItis()}
</div>
)
}
}
4. OnClick always gets called on component render unless you set it up as a function-
I realized although this doesn’t show up with an error message or a warning or any red lines when I set my onClick function up like this -
<button onClick={console.log(‘Hello’)}> Click Me</button>,‘Hello’ shows up on my console once the component mounts and clicking on the button after that does nothing. This is because I am already invoking the function once the component mounts but to get the result I want, I have to set my onClick up the way I would an action, so something like this-
<button onClick={()=>console.log(‘hello’)}> Click Me</button>and now my function runs only on button click.
So, there you have it. Some of the common JSX mistakes to avoid. If I have forgotten any as I am sure I have, please write to me in the comments, otherwise, I hope this helps even a little. Adios lovelies.
