Data not in state or props not fire render

by Quentin Fonteneau

HTML

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

Babel + JSX

"use strict";

class App extends React.Component {
	constructor(props){
  	super(props);
    let myStates = {	'titre' : 'Titre', 
    									'detail' : 'Détail de ma tâche',
    									'termine' : false};
    
    this.state = myStates;
  }
  
  onSubmit = (event) => {
  	console.log(JSON.stringify(this.state));
  }
  
  onReset = (event) => {
  	
  }
  onChange = (event) => {
    let myNewState  = {};
  	
    if(event.target.name == 'termine') {
      myNewState[event.target.name] = !this.state.termine;
    }
    else {
    	myNewState[event.target.name] = event.target.value;
    }
		this.setState(myNewState);
	}
  render() {
    return (
      <div>
        <label htmlFor="titre">Titre : </label>
        <input type="text" name="titre" id="titre" value={this.state.titre} onChange={this.onChange} />
        <br />
        <label htmlFor="detail">Détail</label><br />
        <textarea name="detail" name="detail" id="detail" value={this.state.detail} onChange={this.onChange} />
        <br />
        <label htmlFor="priorite">Priorité : </label><br />
        <select name="priorite" id="priorite"></select>
        <br />
        <label htmlFor="termine">Terminée ?</label>
        <input type="checkbox" name="termine" id="termine" checked={this.state.termine} onClick={this.onChange} />
        <br />
        <label htmlFor="datedefin">Date de fin : </label>
        <input type="date" name="datedefin" id="datedefin" value="" />        
        <br />
        <input type="reset" value="Reset" onClick={this.onReset} />
        <input type="submit" value="Submit" onClick={this.onSubmit} />
      </div>
    )
  }
  
}


ReactDOM.render(
  <App />,
  document.getElementById('container')
);