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
  • …
 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>ReactJS stateful component Demo</title>
    <script src="https://fb.me/react-0.13.3.min.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
</head>
<body>
<script type="text/jsx">
    var StudentResult = React.createClass({
        getInitialState: function(){
            return{
                result:" "
            };
        },
        calculateResult: function(){
            var refScore = this.refs.studentScore.getDOMNode().value,
                    score = parseInt(refScore,10);
            if(score >= 30){
                this.setState({result:"PASS"})
            }else if(score < 30){
                this.setState({result:"FAIL"})
            }else{
                this.setState({result:""})
            }
        },
        render: function() {
            return (
                    <div className="score-container">
                        <input type="number" ref="studentScore"
                               onChange={this.calculateResult}
                               placeholder="Enter student score"/>
                        <h2>Result :{this.state.result}</h2>
                    </div>
            );
        }
    });
    React.render(<StudentResult/>, document.body);
</script>
</body>
</html>
Output

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

Dismiss x
public
Bin info
saan1984pro
0viewers