JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.development.js"></script>
<div id="root"></div>

CSS

* {
  font-family: sans-serif;
}

h1 {
  font-size: 1.2em;
}

li {
  list-style-type: none;
}

Babel + JSX

const log = (val) => JSON.stringify(val, null, 2);

const Track = (props) => {

	const displayIcon = (type) => {
  	const adding = type === 'add';
  	return (
  		<span title={adding? 'add track' : 'remove track'}>{adding ? '+' : '-'}</span>
  	)
  };
  
	return (
  	<span onClick={() => props.clickHandler(props.track)}>
      {displayIcon(props.type)} {props.track.title ||props.track.name} - {props.track.artist}
    </span>
  )
}

const Tracklist = (props) => {
	const listType = props.listType;
	return (
  	<div>
      {props.playlist.length === 0 ?
        ( <strong>No tracks in list yet.</strong> ) :
        ( <ul>
            
          { props.playlist.map((track) => 
          	(
              <li key={track.id} >
                { listType === 'playlist' ? 
                  <Track 
                    clickHandler={props.clickHandler} 
                    type="remove" 
                    track={track} /> : 
                  <Track 
                    clickHandler={props.clickHandler} 
                    type="add" 
                    track={track} /> }
                <span>{props.isInList && props.isInList(track) ? 
                ' - added' : null
                }
                </span>
              </li>
            )
          )}
        </ul> )
      }
    </div>
  )
}

const initialState = {
	playlist: [{
  	id: 0,
    title:'Black or White',
    artist: 'Michael Jackson'
  },
  {
  	id: 1,
    title:'Bad',
    artist: 'Michael Jackson'
  },
  ]
};

const searchData = {
    	playlist: [
      	{id: 's1', name:'biggiesearch',artist:'biggiesmallssearch',album:'reaady to diesearch'},				
        {id: 's2', name:'nassearch',artist:'nasessearch',album:'illmaticsearch'},		
      	{id: 's3', name:'eminemsearch',artist:'emsearch',album:'marshall matherssearch'}
      ]
};

class App extends React.Component {
	constructor(props) {
  	super(props);
    this.state = initialState;
    
    this.add = this.add.bind(this);
    this.remove =...