JSFiddle - React, Tailwind, and code Playground

by gsmargolis

HTML

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="app"></div>

Babel + JSX

class App extends React.Component {

	constructor(props) {
  	super(props);
    this.state = {
			hobbies: ['Tennis', 'Soccer'],
      newHby: ''
    }
  }
  
  changeMessageInput(event) {
  	this.setState({
    	newHby: event.target.value
    });
  }
  
  newHobby(event) {
  	const oldHobbies = this.state.hobbies;
  	this.setState({
    	hobbies: oldHobbies.concat(this.state.newHby)
    })
  }
  
 removeHobby(hobby) {
 	const oldHobbies = this.state.hobbies;
 	var position = oldHobbies.indexOf(hobby);
  console.log(position)

  this.setState({
  	hobbies: oldHobbies.filter(
    	(el, index) => {return index != position}
    )
  });
  
      console.log(this.state.hobbies);
 }
  
	render() {
  
      let list = this.state.hobbies.map(
    	(hobby, index) => {
      		return <li key={index} onClick={ () => {this.removeHobby(hobby)}}>{hobby}</li>
      })
  	return(
  		<div>
        <input type="text" 
          value={this.state.newHby}
          onChange={this.changeMessageInput.bind(this)}></input>
        <button onClick={this.newHobby.bind(this)}>New Hobby</button>
  		    <ul>
  		      {list}
  		    </ul>
        
        
  		</div>
  	);
  }
  
}

ReactDOM.render(<App name="Max"/>, document.querySelector('#app'));