hey, thanks for the question.
My code can be a bit confusing and it is because ive tried to use different approaches, disregarding how efficient or not they are, simply for the sake of try them and see how they do. It also might be inconsistent as i might have started with one thing in mind, but as i evolved the project and added new features, i sometimes would do on top of old ones, which can make the code strey from its initial degsin. Idk, if that makes much sense^^. Even i need to look around closely to figure out how i actually wrote it, so i can asnwer your question . One of my goals was to shorten the code and instead of write raw data, i used functions to create those, you will see in the following explanation.
As you have figured out, there is the stats array, which contains data for each button, first element being the class name(s)(bootstrap button classes), second button text, 3rd icon class name(font awesome classes), and last element being the on click event. This line of code in the beginning of my code declares the several types of color buttons in an array:
const palette=['warning', 'danger', 'success', 'primary', 'dark']
The code is wrote in such fashion, that you can type in additional valid bootstrap color codes, which will add the respective button to the document, for example you can add ‘info’ . Its another topic how well that would look, as i havent bothered to test more buttons ^^.
Inside the App
component(in the render function), you can see where i additionally manipulate the array of the different type of color buttons so it can be used for the buttons element:
const palette1=palette.map(item=>[`m-1 btn btn-${item}`, '', `fas fa-paint-brush`, ()=>this.setColor(item)])
It goes thru every element(‘warning’, ‘danger’ etc) and creates an array, which is in fact the stats
array you’ve been looking for. You can see the first element being “m-1 btn btn-${item}
”, where item
is replaced with the respective code, ‘danger’ for example, which will create the bootstrap danger button. The second element is empty, as it represents the button text, which i dont use for the color buttons. 3rd element you can see the font awesome icon class “fas fa-paint-brush
”, which is a brush icon. Last element is the button on click event, ()=>this.setColor(item)
, the App method which changes color. It uses the same bootstrap color codes as parameters. That color is then stored in the component state and all elements has it applies as bootstrap class to set their coloring.
Here is where i finally map thru every element in the palette buttons array to actually create the elements:
<div id='bb1'>{palette1.map(item=><MyButton stats={item}/>)}</div>
Its within the JSX body of the render function. it goes thru the buttons data for the first set of color buttons(as i have two sets, one controls the colors for the input area, the other takes over the preview area) and creates button elements.
For the functionality buttons you can see the data array is created differently:
const buttons=[[' Clear', 'trash', this.clearConsole],[' Reset', 'redo', this.refreshCode]].map(item=>{return [`m-1 btn btn-dark`, item[0], `fas fa-${item[1]}`, item[2]]})
Its decalred again within the render function. its only two buttons, “Clear” and "Reset. I decalred only their key words: button text, front awesome icon name and button on click event(methods within the app component, this is why the arrays are created inside the app, so they can easily access its methods). I map throught the two buttons, to render the data in the correct format, so it can be used in the button component, which ive already mentioned is a 4 elements array of bootstrap button classes, button text, font awesome icon(classes) and button on click event. Unlike the colors buttons, here we have button text, the bootstrap classes are identical, but the fontawesome icons are different, as well as the on click events.
The fun thing is, how the different buttons are so…different in design, yet they use the same button component to be rendered, as its designed to be flexible
PS: if you add this line of code:
console.log(buttons, palette1, palette2)
after those arrays are declared in the App render function, you can see in your browser console how the arrays used as parameters for the button components actually look like