Navbar weird issue
I have made a navbar component it has an array of object to render the links. My problem is every element is getting colored beside the last one I don't know what to do. I haven't faced this weird problem before. How do I fix this and what is causing this issue. Can anyone help me out please?
My navbar code-
https://playcode.io/1533898
PlayCode.io
React Playground
Try this online React Playground playground with instant live preview and console. Easy & Fast. Experiment yourself.
4 Replies
Observing the element in the inspector it is initially getting the "text-orange" class but then it is being overwritten. I suspect that this is due to the way React works in that on any change it updates the whole component - It isn't really working on the other links either as they are showing as green whereas it looks like you are trying to set them to orange * (see note below)
I am no expert on React so no doubt somebody else may be able to help you more but I think that what you really need to do is to save the "routes" in a setData hook and update the state of the link there.
Then, in your code where you render the link (button) use a ternary expression to show the "text-white" or "text-orange-500" depending on it's state something like this:
className={${route.active ? "text-orange-500" : "text-white"}`}``
By using a useState hook your click handeling would be simpler.
I have cloned your code and changed it to a working version using the useState hook to control the routes object, as I say, no doubt it could be improved or optimized but it may help you on your way:
https://playcode.io/1533982
* "text-orange" is not a valid Tailwind class - it should be something like "text-orange-500"Sorry for the confusion I should have added that I have orange color with hex code in the tailwind config file.
As for the color shown in the website I believe there is no default class for text-orange so it is showing green or an accent of the site.
I should have mentioned it sorry for the confusion but if you have used the navigation bar you would find all the links (in case this example has buttons) when you click them it gets a color but when you click equity (one of the options) You will find it white but other ones are getting green in this case.
Yea, I saw that they change to green when clicked. However , as I mention, the last one also gets the new “text-orange”class but is instantly changed back to text-white which make me think that is due to the way you are mixing vanilla JavaScript with React within the component.
Thank you for your response. It helped me a lot to understand the problem.☺️☺️