React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by _alexander_

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

let interests = ["Музыка", "Компьютеры", "Радио"];

let ListOfInterest = React.createClass({
  getInitialState: function() {
    return { value: '', interests: interests };
  },
  componentWillMount() {
    let local = localStorage.getItem('interests')
    if (local) {
      this.setState({ interests: JSON.parse(local) });
    } else {
      localStorage.setItem(
      	'interests', JSON.stringify(this.state.interests)
      )
    }
  },
  
  deleteInterest(key) {
    this.setState({
    	interests: this.state.interests.filter((el, i) => i !== key)
    })
  },
  
  addInterest() {
    this.setState({ 
    	value: '', 
      interests: this.state.interests.concat(this.state.value)
    });
  },
  handleChange(event) {
    this.setState({ value: event.target.value });
  },
  render() {
    return <div className="interests">
      <b>Интересы</b>
      <br/>
      {this.state.interests.map((int, index) => {
        return <button onClick={() => {
          this.deleteInterest(index)
        }} key={index} className="btn-interest">{int}</button>
      })}
      <input type='text' placeholder="Add" value={this.state.value} onChange={(e) => this.handleChange(e)}/>
      <button onClick={() => {
        this.addInterest()
      }} className="add">Add interest</button>

    </div>
  }
})

ReactDOM.render(<ListOfInterest />, document.getElementById('root'));