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>
<script src="//fb.me/react-0.13.1.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
​
</body>
</html>
 
const boxes = [
  {
    status: 1
  },
  {
    status: 2
  },
  {
    status: 3
  },
  {
    status: 4
  },
  {
    status: 5
  },
];
​
const statuses = {
  1: ['Новое сообщение', 'btn-default'],
  3: ['Оплатить', 'btn-primary'],
  2: ['В работе', 'btn-success'],
  4: ['В работе 2', 'btn-warning'],
  5: ['В работе 5', 'btn-danger']
};
​
class Bbutton extends React.Component {
  render() {
    let modifyHTML = (this.props.statusNum == 3) ?
​
    (<div>Text + <button type="button" className={'btn ' + this.props.btn1}>{this.props.btn2}</button></div>)
:
​
  (<button type="button" className={'btn ' + this.props.btn1}>{this.props.btn2}</button>);
    return (
      <div>
      {modifyHTML}
      </div>
    )
  }
}
​
class Home extends React.Component {
  render() {
    return (
      <div className="container">
    { boxes.map(box => (                        <Bbutton
      btn1={statuses[box.status][1]}
      btn2={statuses[box.status][0]}
      statusNum={box.status}
      />                     
    )) }
  </div>
    
    )}};
React.render(<Home />, document.body);
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers