CODEWITHSUNDEEP
reactjs
LOTUSMS
LOTUSMS

Reputation: 10240

Dynamic className together with a fixed class name in a custom component

I'm creating a custom component and I want to be able to make it flexible enough to re-use it in other ways. In it's natural form it contains a class box and this gives it some native styles. However, if I wanted to reuse this component and alter the styles I would like to cascade another class with the box class it already contains. By simply declaring className="custom-class" And it would render as:

DESIRED RESULT

  <div class="box custom-class">
      Something
  </div>

Right now I have something like this:

import React from 'react';
import { Row, Col } from 'react-flexbox-grid';

const Box = (props) => (
    <div className='box {props.className}'>
        {props.showTitle &&
            <Row between="xs" className="box-top">
                <span className="box-title">{props.title}</span>
            </Row>
        }
        <Col xs={12} className="box-info">
            {props.content}
        </Col>
        {props.showBottom &&
            <Col xs={12} className="box-bottom">
                {props.bottom}
            </Col>
        }
    </div>
);

export default Box;

But this is rendering the following result: 

  <div class="box {props.className}">
      Something
  </div>

It is not parsing the props and changing it for the custom-class. This is how I intend to use it

<Box
    showTitle={false}
    showBottom={false}
    className="custom-class"
    content={<MediaStatusBoxContent/>}
/>

What am I doing wrong?

Thanks in advance

Upvotes: 2

Views: 1944

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104369

Use Template Literals for this:

className={`box ${props.className}`}

Or write it like this by using +:

className={"box " + props.className}

When using {} that means, its a dynamic value, inside that we can add two strings by using +.

Upvotes: 6

Related Questions