loginAppPanel

loginAppPanel

by Yashpreet Singh

HTML

<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="mainContainer">
</div>

Babel + JSX

let name = 'Yash';
/* function App(props){
  return (
    <div>
      <p>{props.name}</p>
      <button>Change Name</button>
    </div>
  );
}*/
function Username(props){
	return(
  	<p onClick={() => { return props.nameClickedHandler(props.username)}
    }>{props.username}</p>
  );
}
class App extends React.Component{
    constructor(props){
    		super(props);
         this.state = {
        	 name: props.name,
           elements:[],
           message:''
        };
    }
    changeName(){
    	this.setState({
      		name:"viper"
      });
    }
    addElement(){
    	const oldElements = this.state.elements;
      let newElements = oldElements.concat(oldElements.length + 1);
      this.setState({
      		elements:newElements
      });
    }
    changeMessageInput(event){
    		this.setState({
      		message:event.target.value
        });
    }
    userWasClicked(name){
    	alert(name);
    }
		render(){
    	  let update ='';
        let updateClass='';
        if(this.state.name != this.props.name){
        	update= <p>name updated</p>;
          updateClass="updated";
        }
        
        let list = '';
        if (this.state.elements) {
          list = this.state.elements.map(
            (el) =>{
            		const liStyle = {
        						backgroundColor:el%2 == 0?"red":"green"
        				};
                return <li key={el} style={liStyle}>{el}</li>
            }
          );
        }
    		return (
            <div>
             <Username username="ysh" nameClickedHandler ={this.userWasClicked.bind(this)}></Username>
             <Username username="viper" nameClickedHandler ={this.userWasClicked.bind(this)}></Username>
              <p className={updateClass}>{this.state.name}</p>
              {update}
              <button onClick={this.changeName.bind(this)}>Change Name</button>
              <button onClick={this.addElement.bind(this)}> addElement</button>
              <ul>
                {list}
              </ul>
             ...