@thomasrichmond
Latest solutions
REST Countries API w/ React, Router & Tailwind
#react#react-router#tailwind-cssSubmitted over 2 years ago
Latest comments
- @mslee017
Hey there! If you want to give it a go without exact code I'll try and lay steps our here for the button with state, and feel free to look at my project if you get stuck. For the button with state, what I did was create a state value called currentActive and by default it should be set to null. You can then create a function that takes an argument and all that function is going to do is setCurrentActive to the number it clicks, like so: 1). Create a state that will essentially hold the current active element of the button groups. It should be initialized to null
2). Create a function to handle this state on click, it will need an argument (eventually receives index of the array being Mapped over). Function should simply then be used to set the current value of the state created above
3). On click function inside the elements you are returning/mapping over. Map should use TWO arguments in this case, the number itself and the index argument the callback gives. Your function that is setting the state inside here should then take the index as its argument
4). Conditional styles! Inside the classes, use template literal to check if the index is equal to the state value. If it is, it should be orange. If not, the dark blue.
Good luck!
- @MazzGuille@mslee017
Well done! If I had to nitpick anything, I would say to check the responsiveness a bit. From 375px to 700px where you have your media query, the card keeps on growing, and then it shrinks again. Maybe try a max with on the card container for the two breakpoints they specify (375px and 1440px I think)? Javascript and everything else looks good :)
Marked as helpful
