Passing in class names to react components

Question

I am trying to pass in a classname to a react component to change it\'s style and cannot seem to get working:

class Pill extends React.Component {

  render(         


        

Answer 1

As other have stated, use an interpreted expression with curly braces.

But do not forget to set a default.
Others has suggested using a OR statement to set a empty string if undefined.

But it would be even better to declare your Props.

Full example:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Pill extends Component {

  render() {

    return (
      {this.props.children}
    );
  }

}

Pill.propTypes = {
  className: PropTypes.string,
};

Pill.defaultProps = {
  className: '',
};