React – Inserting classes names from JSON object

Hi, if you want to insert class names that are in your JSON object into a react components and even if you want to insert the name of font awesome icons, you can implement this solution:

// Dependencies
import React from 'react';
import PropTypes from 'prop-types';

// Styles
import styles from './Fields.scss';

const Fields = props => {

  // JSON object
  const fields = [
    {
      title: 'String',
      name: 'string inline',
      icon: 'fas fa-text-width',
      color: 'blue' // Class name that we want to insert into the component
    },
    {
      title: 'Text',
      name: 'text',
      icon: 'far fa-file-alt',
      color: 'pink' // Class name that we want to insert into the component
    },
    {
      title: 'Integer',
      name: 'integer',
      icon: 'fas fa-address-card',
      color: 'yellow' // Class name that we want to insert into the component
    },
    {
      title: 'Float',
      name: 'float',
      icon: 'fas fa-asterisk',
      color: 'green' // Class name that we want to insert into the component
    },
    {
      title: 'Boolean',
      name: 'boolean',
      icon: 'fab fa-bitcoin',
      color: 'purple' // Class name that we want to insert into the component
    },
    {
      title: 'Json',
      name: 'json',
      icon: 'fab fa-algolia',
      color: 'red' // Class name that we want to insert into the component
    }
  ];

  return (
    <main className={styles.container}>
      <ul>
        {/*
          We will go through every position of
          our arra and print the data depending of our name properties
        */}
        {
          fields.map((option, i) => {
            return (
              <li>
                <section>
                  <p>{option.title}</p>

                  <section className={styles.widgetOption}>
                    {/* In this point we will insert
                       ${styles[option.color]} to get the property
                       name and value (to insert the class name )
                    */}
                    <i
                      className={`${option.icon} ${styles[option.color]}`}
                    />
                    <span>{option.name}</span>
                  </section>
                </section>
              </li>
            )
          })
        }
      </ul>
    </main>
  );
};


export default Fields;

@import './../../../styles/global';

.container {
  border: 1px solid $greyA;
  width: 210px;
  height: 100%;
  padding: 10px;

  ul {
    list-style: none;
    margin: 0px;
    padding: 0px;

    li {
      section {
        p {
          color: $greyC;
          text-decoration: none;
          text-transform: uppercase;
          letter-spacing: .5px;
          font-size: 12px;
          padding: 0px;
          font-weight: 400;
          line-height: 1.5;
        }

        .widgetOption {
          width: 100%;
          border: 1px solid $greyA;
          height: 40px;
          border-radius: 5px;
          box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px;
          display: flex;
          align-items: center;
          padding: 5px;
          box-sizing: border-box;

          i {
            margin-right: 10px;
            font-size: 22px;
          }

          .red {
            color: $redB;
          }

          .yellow {
            color: $yellowA;
          }

          .pink {
            color: $pinkA;
          }

          .purple {
            color: $purpleA;
          }

          .green {
            color: $greenA;
          }

          .blue {
            color: $blueA;
          }
          
          span {
            font-size: 14px;
            text-transform: capitalize;
          }
        }
      }
    }
  }
}

By Cristina Rojas.