Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
  <head>
    <title>Test</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://fb.me/react-0.5.1.js"></script>
    <script src="http://fb.me/JSXTransformer-0.5.1.js"></script>
  </head>
  <body>
    <div id="soln1"></div>
    <div id="soln2"></div>
    <div id="soln3"></div>
    <script type="text/jsx">
      /** @jsx React.DOM */
 
      var TestApp = React.createClass({
        getComponent: function(index){
          $(this.getDOMNode()).find('li:nth-child('+index+')').css({'background-color': '#ccc'});
        },
        render: function(){
          return(
               <div>
                 <ul>
                  <li onClick={this.getComponent.bind(this, 1)}>Component 1</li>
                  <li onClick={this.getComponent.bind(this, 2)}>Component 2</li>
                  <li onClick={this.getComponent.bind(this, 3)}>Component 3</li>
                 </ul>
               </div>
          );
        }
      });
      React.renderComponent(<TestApp />, document.getElementById('soln1'));
      
      var ListItem = React.createClass({
        getInitialState: function(){
          return {isSelected: false};
        },
        handleClick: function(){
          this.setState({
            isSelected: true
          })
        },
        render: function(){
          var isSelected = this.state.isSelected;
          var style= {'background-color' : ''};
          if(isSelected){
            style= {'background-color' : '#ccc'};
          }
          return(
            <li onClick={this.handleClick} style={style}>{this.props.content}</li>
          );
        }
      });
      
      var TestApp2 = React.createClass({
        getComponent: function(index){
          $(this.getDOMNode()).find('li:nth-child('+index+')').css({'background-color': '#ccc'});
        },
        render: function(){
          return(
               <div>
                 <ul>
                  <ListItem content="Component 1" />
                  <ListItem content="Component 2" />
                  <ListItem content="Component 3" />
                 </ul>
               </div>
          );
        }
      });
      React.renderComponent(<TestApp2 />, document.getElementById('soln2'));
    </script>
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
dhirajbodicherlapro
0viewers