I retrieved data from an API and used it to create a list of buttons. The data I received includes names and color codes.
{ name: "bob", colorCode: "#DC7472" },
{ name: "ben", colorCode: "#69DCD1" },
{ name: "john", colorCode: "#1570C5" },
{ name: "joe", colorCode: "#1550C4" }
];
The buttons correspond to the names in the array items, with an initial state of false. Clicking a button toggles its state between true and false.
If a button's state is true, I want its background color to match the color code, with white text. When false, I want the text color to match the color code, with a white background.
Initial states:
{
bob:false,
ben:false,
john:false,
joe:false
}
Check out the code here - https://stackblitz.com/edit/react-dam8vt
I am figuring out how to implement this using React and Sass.