Can't figure out this error

demo.jsx

System.import('{universe:react-widgets}').then(ReactWidgets => {
    // use widgets over here, e.g.
    let Calendar = ReactWidgets.Calendar;

    ReactDOM.render(<Calendar defaultValue={new Date()} />, document.getElementsByClassName("calendar"));
})

Reservation = React.createClass({

	onSubmit(e) {
		e.preventDefault();
		var ele = $(e.target);
		var name = ele.find("#name").val();
		console.log(name);
	},

	render() {
		return (
			<div className="row">
			<h3 className="text-center">Form</h3>
			    <form onSubmit={this.onSubmit} className="col offset-s4 s4">
				    <div className="row">
				        <div className="input-field col s12">
					        <input id="name" type="text" className="validate"/>
					        <label htmlFor="name">What is your full name?</label>
				        </div>
				        <div className="input-field col s12">
					        <input id="email" type="text" className="validate"/>
					        <label htmlFor="email">What is your email address?</label>
				        </div>
				        <div className="input-field col s12">
					        <input id="phone" type="text" className="validate"/>
					        <label htmlFor="phone">What is your cell number?</label>
				        </div>
				        <div className="calendar">
				        </div>
				    </div>
				    <div>
						<button className="btn btn-block waves-effect waves-light">Submit Your Reservation
							<i className="mdi-content-send right"></i>
						</button>
					</div>

			    </form>
			</div>
		);
	}
});

document.getElementsByClassName("calendar")
Will return an array, not single node
https://developer.mozilla.org/pl/docs/Web/API/Document/getElementsByClassName