Pulse7
8/1/2017 - 5:25 PM

React state example

React state example

class Button extends React.Component{
        //constructor(props){
        //  super(props)
        //  this.state={counter:0};
        //}
        state={counter:0}; //new syntax
        
        //lambda syntax essential for binding this to component
        //without it this would be null
        handleClick=()=>{ 
            this.setState(
                {
                    counter:this.state.counter+1
                });
        };

        render(){
        return <button onClick={this.handleClick}> {this.state.counter}</button>
        }
    }

    function ButtonPanel(props){
      let buttons = [];
    let numButtons = parseInt(props.buttonNum);
    for(var i=0;i<numButtons;i++)
      buttons.push(<Button label={props.label}/>);
      return <div>{buttons}</div>
    }

    let mountNode = document.getElementById("container")
    ReactDOM.render(<ButtonPanel label="Go" buttonNum="10"/>,mountNode)