React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by Krzysztof Safjanowski

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

var Contact = React.createClass({
	
	handleRemove: function(event, id) {
    event.preventDefault();
    this.props.handleRemove(id) // handleRemove as passed from Hello
  },
	
	render: function() {
		return (
			<div className='contactItem'>
				<img className='contactImage' src={'http://icons.veryicon.com/ico/System/100%20Flat%20Vol.%202/contacts.ico'}/>
				<div className='contact_Labels'>	
					<p className={'contactLabel'}> 
						Imię: {this.props.item.firstName}
					</p>
					<p className={'contactLabel'}> 
						Nazwisko: {this.props.item.lastName}
					</p>
					<a className={'contactEmail'} href={'mailto: ' + this.props.item.email}> 
						{this.props.item.email}
					</a>
				</div>
				<button className='contactCross' onClick={e => this.handleRemove(e, this.props.item.id)}>Remove me!</button>
			</div>
		)
	},
});


class Contacts extends React.Component {
	constructor(props) {
  	super(props)
    this.state = {
    	contacts: props.contacts
    }
  }
  
  handleRemove(id) { 
   this.setState((previousState) => {
   	return {contacts: previousState.contacts.filter(contact => contact.id !== id)}
   })
  }

  render() { 
    return (<div>
      {this.state.contacts.map(contact => {
      	return <Contact key={contact.id} item={contact} handleRemove={this.handleRemove.bind(this)} />
      })}
    </div>)
  }
}

let contacts = [{
   emai: '[email protected]',
   id: 9,
   firstName: 'Foo',
   lastName: 'Wiśniewski'
}, {
   emai: '[email protected]',
   id: 10,
   firstName: 'Bar',
   lastName: 'Wiśniewski'
}, {
   emai: '[email protected]',
   id: 11,
   firstName: 'Baz',
   lastName: 'Wiśniewski'
}];

ReactDOM.render(
  <Contacts contacts={contacts} />,
  document.getElementById('container')
);