Can I create my own JSX element attributes?

Question

Can I create my own JSX element attributes?

Answer

We can create our own JSX element attributes! When we create our own JSX attributes we should not include whitespace in the attribute name, instead we should use either dashes or camelCase to separate multi-word attributes, or we can use our custom multi-word attribute name as a single word.

Example:
app.js

const myH1 = <h1 my-custom-attribute="my-custom-attribute-value" myOtherCustomAttribute="my-other-custom-attribute-value" anothercustomattribute="another-custom-attribute-value">Hello React</h1>;
//all of the above attributes `my-custom-attribute`, `myOtherCustomAttribute`, and `anothercustomattribute` are valid JSX
9 Likes

Thank you for this remark, it’s pretty encouraging :nerd_face:

What is a camel space?

did you mean camel case? camel case looks like this

thisIsExample, helloWorld

1 Like

Say what?.. Are you a bot or something?

3 Likes

And where would it then be defined what those attributes do?

4 Likes

camelCase is a type of method for making first letter of word capital instead of space before it
eg:- normal case
camelCase

1 Like

html custom attributes are for signing some values to the elements so you can then manipulate them in JS and having nicer user experience. So basically they are not like classes where you have some functionallity, they are jus some values which you define just after you mention them in html tag

1 Like

Does the value have to use the same nomenclature or can it be a string?

What is the purpose of creating a custom attribute in a JSX element ?
How can I use it ?

4 Likes