Silly React Articles (Part 2): Constants Declaration in React for easy list rendering

Constants Declaration in React for easy list rendering image By Yasir Gaji

When writing JSX in React and you’re creating an unordered list (UL) that looks something like this:

A basic render of an unordered list in JSX By Yasir Gaji

There’s a better way to write this code which is by creating a folder in the ‘src’ folder named ‘constants’ with an ‘index’ file, in there you’d declare your lists as:

A constant of static codes to be used as lists in unordered list declarations By Yasir Gaji

Then re-render in your JSX folder as:

First, create a type as an interface then import and map your links as seen above.

Conclusion

I expect questions for clarification. Kindly criticize and make corrections as well. Share Thank you.