How would you solve this problem?

Question

React

Sandbox code. (click Run with JS if no buttons are visible)
Essence:
There is an array of statuses (boxes).
Depending on the status number, the style of the statuses buttons changes.
Now, depending on the status, it was also necessary to change the markup (button or text + button) - modifyHTML.
And here for one status (this.props.statusNum == 3), I asked, but it is necessary for several statuses (for example 1, 3, 5).
How to do it better? Iterate over forEach? Tried, but it is not clear at what point to enumerate, the result was not achieved.

Answer 1

Although the question has been asked for a long time, I will answer every one.
It is necessary to separate the data from the code.
For example, it is possible to store in the same array statusesfor each element the third element the text before the button, if this type of button has text. By the way, it's better to make an array of objects rather than an array of arrays.
Well, and then passing the parameter btn3 (which will be undefinedif there is no text in front of the button), in the component Bbuttonalready make a button with or without text.
In general, here is the
jsbin code