JSFiddle - React, Tailwind, and code Playground

by sabbin

HTML

<!DOCTYPE html>
<html>
  <body>
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" charset="utf-8"></script>  
<div id="root"></div>
  </body>
</html>

JavaScript

class Input extends React.PureComponent {
        render() {
          return <input {...this.props} ref={this.props.forwardedRef} />;
        }
      }

      const TextInput = React.forwardRef((props, ref) => {
        return <Input {...props} forwardedRef={ref} />
      });
      
      class FocusableInput extends React.Component {
        
        ref = React.createRef()

        render() {
          return <TextInput ref={this.ref} focus={this.props.focused} />;
        }

        // When the focused prop is changed from false to true, 
        // and the input is not focused, it should receive focus.
        // If focused prop is true, the input should receive the focus.
        // Implement your solution below:
        componentDidUpdate(prevProps) {}
        
        componentDidMount() {}
      }
      
      FocusableInput.defaultProps = {
        focused: false
      };

      const App = (props) => <FocusableInput focused={props.focused} />;
      
      const rootElement = document.getElementById("root");
      ReactDOM.render(<App />, rootElement);