Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>React</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
  <script src="//fb.me/react-with-addons-15.1.0.js"></script>
  <script src="//fb.me/react-dom-15.1.0.js"></script>
</head>
<body>
  <div id="container"></div>
</body>
</html>
 
body {
  margin: 20px;
}
button {
  line-height: 1em;
  font-size: 20px;
  padding: 0.5em;
}
.box {
  height: 200px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: 1px solid black;
}
.box.focused {
  outline: 6px solid red;
}
 
class Hello extends React.Component {
  render() {
    return <button {...this.props}>Hi, {this.props.name}</button>
  }
}
class FocusParent extends React.Component {
  constructor(props) {
    super(props)
    this.state = { isFocused: false }
  }
  render() {
    return (
      <div className={this.state.isFocused ? 'box focused' : 'box'}>
      {React.cloneElement(this.props.children, {
        onFocus: _ => this.setState({ isFocused: true }),
        onBlur: _ => this.setState({ isFocused: false })
      })}
      </div>
    )
  }
}
ReactDOM.render(
  <FocusParent>
  <Hello name="World" />
  </FocusParent>
  ,
  document.getElementById('container')
);
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers