<!DOCTYPE html>
<html>

  <head>
    <title>PrimeReact QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    
    <!-- PrimeReact style dependencies -->
    <link rel="stylesheet" href="https://unpkg.com/primereact@1.4.1/resources/themes/omega/theme.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/primereact@1.4.1/resources/primereact.min.css" />
    
    <!-- Configure SystemJS -->
    <script src="https://unpkg.com/systemjs@0.20"></script>
    <script src="systemjs.config.js"></script>
  </head>

  <body>
    <div id="root"></div>
  </body>

</html>
body {
  padding: 2em;
  font-family: Arial, Helvetica, sans-serif;
}

# PrimeReact Issue Template
Please create a test case and attach the link of the plunkr to your github issue report.
/*global System */
'use strict';

System.config({
    transpiler: 'plugin-babel',
    babelOptions: {
        sourceMaps: false,
        stage0: true,
        react: true
    },
    meta: { },
    paths: {
      'npm:': 'https://unpkg.com/'
    },
    map: {
      // our app is within the app folder
      app: 'app/index.jsx', 
      
      "plugin-babel": 'https://unpkg.com/systemjs-plugin-babel@0.0.25/plugin-babel.js',
      "systemjs-babel-build": 'https://unpkg.com/systemjs-plugin-babel@0/systemjs-babel-browser.js',
      
      "react": "npm:react@16/umd/react.development.js",
      "react-dom": "npm:react-dom@16/umd/react-dom.development.js",
      "prop-types": "npm:prop-types/prop-types.js",
      "classnames": "npm:classnames@2.2.5",
      "font-awesome": "npm:font-awesome@4.7.0",
      "react-scripts": "npm:react-scripts@1.0.11",
      "primereact": "npm:primereact@1.4.1/"

    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      'https://unpkg.com/' : { defaultExtension: false },
    }
});
 
System.import('app');
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('root'));
import React from 'react';

import { Chips } from "primereact/components/chips/Chips";

export default class App extends React.Component {
    
    state= {
      chips1Values :['test'],
      chips2Values :[]
    }
    
    render() {
        return (
          
            <div>
            <div>
             <Chips value={this.state.chips1Values} placeholder="test" />
            </div>
            
            
            <div>
             <Chips value={this.state.chips2Values} placeholder="test2" />
            </div>
            
            </div>
        );
    }
}