Skip to content

Instantly share code, notes, and snippets.

@chiamakaikeanyi

chiamakaikeanyi/gist:31ee18ea7f87a588a1b0f7fa53a4e6e4

Created April 5, 2018 13:15
Show Gist options
  • Save chiamakaikeanyi/31ee18ea7f87a588a1b0f7fa53a4e6e4 to your computer and use it in GitHub Desktop.
Save chiamakaikeanyi/31ee18ea7f87a588a1b0f7fa53a4e6e4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. chiamakaikeanyi created this gist Apr 5, 2018.
    50 changes: 50 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,50 @@
    //HTML
    <div id="root"></div>



    //JSX
    class Details extends React.Component{
    render(){
    return <h1>{this.props.details}</h1>
    }
    }


    class Button extends React.Component{
    render(){
    return(
    <button style = {{color: this.props.active ? 'red' : 'blue' }} onClick = {() => {this.props.clickHandler(this.props.id, this.props.name)}}>
    {this.props.name}
    </button>
    )
    }
    }


    class App extends React.Component{
    constructor(props){
    super(props)
    this.state = {activeArray:[0,0,0,0], details:""}
    this.clickHandler = this.clickHandler.bind(this)
    }
    clickHandler(id, details){
    var arr = [0,0,0,0]
    arr[id] = 1
    this.setState({activeArray:arr, details:details})
    console.log(id,details)
    }
    render(){
    return(
    <div>
    <Button name="Vanilla" id = {0} active = {this.state.activeArray[0]} clickHandler = {this.clickHandler}/>
    <Button name="Angular" id = {1} active = {this.state.activeArray[1]} clickHandler = {this.clickHandler}/>
    <Button name="React" id = {2} active = {this.state.activeArray[2]} clickHandler = {this.clickHandler}/>
    <Button name="Vue" id = {3} active = {this.state.activeArray[3]} clickHandler = {this.clickHandler}/>
    <Details details = {this.state.details} />
    </div>
    )
    }
    }

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