Adding div elements in ReactJS

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

What is s? Everything within the curly brackets is evaluated, not a simple replacement. — chazsolo
– chazsolo, Commented Jun 2, 2017 at 2:07
could you elaborate a little bit? I would be helpful knowing what s is. Are you using css-modules? — fcaldera
– fcaldera, Commented Jun 2, 2017 at 2:23

fcaldera · Accepted Answer · 2017-06-02 03:11:54Z

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>

edited Jun 2, 2017 at 3:11

answered Jun 2, 2017 at 2:34

fcaldera

5821 gold badge6 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brendan Kennedy Over a year ago

How would this work for three elements? say <div class="gel c2 r1">

Collectives™ on Stack Overflow

Adding div elements in ReactJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related