Dynamic classname with data mapping ES6

Question

New to Reactjs. Help me define data.map classname. like classname="plan-{plan.flag}" (to be rendered as class="plan-red"). How can I include data value inside double quotes?

import React, { Component } from 'react';
import { Grid,Row,Col} from 'react-bootstrap';

var data = [{"aufr1":5,"dltp3":"Exclusive","cobr3":4,"lidp4":100,"stpd9":"[null]","plnm2":"plan","mpsadvid":5498,"qnty0":2350000,"lnnm3":"PR","prob5":100,"RNum":0,"llst1":"Approved","flag":"red"}];

export default class Report extends Component {

  render() {
    return (  
        <Grid id="report">           
          {
            data.map(function(plan,i){
              return (
               <div className="data-wrapper plan-"+{plan.flag}  key={i}>
                  <div className="row-wrapper plan-header">
                      <Row className="show-grid ">
                          <Col sm={3} md={3} className="plan-name">
                            <h6>Plan</h6>
                            <span>{plan.plnm2}</span>
                          </Col>
                          <Col sm={3} md={3} xsHidden>
                            <h6>Id</h6>
                            <span>{plan.plid7}</span>
                          </Col>
                          <Col sm={3} md={3} xsHidden>
                            <h6>Opp</h6>
                            <span>{plan.adas4}</span>
                          </Col>
                          <Col sm={3} md={3} xsHidden>
                            <h6>Mps Id</h6>
                            <span>{plan.llst1}</span>
                          </Col>
                      </Row>
                  </div>
              </div>
              );
            })
          }
        </Grid>
    );
  }
}

https://github.com/JedWatson/classnames Using the classnames utility is a very nice way to composition those kinds of things — thsorens, May 15 '16 at 07:31
You can put arbitrary JavaScript expressions inside the `{...}`. So all you need is `{'prefix' + someValue}`. — Felix Kling, May 15 '16 at 16:15

score 2 · Accepted Answer · answered May 15 '16 at 03:43

2

When you are setting your class name keep in mind that the concat from the + is being done by javascript.

So wrap the entire className instead to build the string:

<div className={"data-wrapper plan-" + plan.flag}  key={i}>

And you should be good to go.

answered May 15 '16 at 03:43

Brad Colthurst

2,515
14
13

score 1 · Answer 2 · answered May 15 '16 at 03:52

1

Template Strings will be the best solution.

<div className={`data-wrapper plan-${plan.flag}`}  key={i}>

answered May 15 '16 at 03:52

Not

31
3

score 0 · Answer 3 · answered May 15 '16 at 04:01

Something in addition to Brad's answer: React's JSX is like a template language, which means those <div></div>s you write in the return statements will be added to the html page literally. Then when you want dynamic parts in them, you use {} to include some js expressions whose output will be inserted to your html tag in JSX. So Brad's solution then comes to you smoothly.

Also,

map is in the ES5 standard: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
Usually, map provides you with a simple and expressive syntax to change an array to another with elements you want, e.g. var ids = users.map((user)=>{return user.id;});. So if you aren't expecting a new array but just doing something to each of the elements, using for(i...) loop(for ES5) and for(..of..) loop(for ES6) feels a better practice to me. But sure this is just a matter of style/taste :)

Dynamic classname with data mapping ES6

3 Answers3