Adding div elements in ReactJS - html

Question

I am building a page preloader with ReactJS. The Codepen snippet I am using is written in HTML and I need help converting it into HTML ready for React.
Part of the snippet
<div class="socket">
<div class="gel center-gel">
<div class="hex-brick h1"></div>
<div class="hex-brick h2"></div>
<div class="hex-brick h3"></div>
</div>
</div>
Conversion to React
<div className={s.socket}>
<div className={s.gel s.center-gel}>
<div className={s.hex_brick s.h1}></div>
<div className={s.hex_brick s.h2}></div>
<div className={s.hex_brick s.h3}></div>
</div>
</div>
So I have replaced hyphens with underscores, used curly brackets instead of quotes, and added Name to the class. However, I don't know how to add the second div modifier (for example in div gel there is element center-gel). When a second element is added to a React div, it fails to compile.
React does not allow these second div elements. After testing, my loading animation does not look correct if I separate out the elements, the structure needs to stay the same.
Snippet Used

Answer 1

When you write JSX code in React you are actually writing JavaScript code. Let's say you put those expression into a variable like so:
var styles = s.gel s.center-gel;
It just doesn't make any sense in JS. You need to write a valid expression like this:
var styles = [s.gel, s['center-gel']].join(' ');
Keeping that in mind, your code should work this way:
<div className={s.socket}>
<div className={[s.gel, s['center-gel']].join(' ')}>
<div className={[s.hex_brick, s.h1].join(' ')}></div>
<div className={[s.hex_brick, s.h2].join(' ')}></div>
<div className={[s.hex_brick, s.h3].join(' ')}></div>
</div>
</div>