JSFiddle - React, Tailwind, and code Playground

by Amir Meshkin

HTML

<div id="app"></div>

SCSS

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  height: 300px;
}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

h1 {
  font-weight: bold;
  margin-bottom: 15px;
}

input {
  margin-right: 5px;
}

.test {
  background: #fff000;
  height: 50px;
}

.grid20 {
  width: 20%;
  float: left;
  padding: .5rem 0;
}

.grid80 {
  width: 80%;
  float: left;
  padding: .5rem 0;
}



$breakpoint-tablet: 768px;
$breakpoint-phone: 375px;

@media (max-width: $breakpoint-tablet) {

  .md-grid100 {
    width: 100%;
    text-align: center;
    padding: .5rem 0;
  }
}



//@media (max-width: $breakpoint-tablet) {
//
//
//  .md-grid100 {
//    width: 100%;
//    text-align: center;
//    margin: 0 1rem;
//  }
//}


@media (max-width:  $breakpoint-phone) {


  .md-grid100 {
    width: 100%;
    text-align: center;
    padding: .5rem 0;
  }
}

React

var INSTRUCTIONS = `
    Read the code below and complete the three tasks
    1) Make ComponentThree render after the continue button is pressed.
    2) Make the name 'Chris' in ComponentThree dynamic based on the input in the ComponentTwo
    3) Explain how you would make the continue button appear under the text box and full width on a mobile device.
    
    
    
    Learned:  
    Target and Set State
    https://duncanleung.com/fixing-react-warning-synthetic-events-in-setstate/
    
    
    
    
`
class ComponentOne extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      workflow: 'GET_NAME'
    }

    this.setWorkflow = this.setWorkflow.bind(this);
  }

  setWorkflow() {


    switch(this.state.workflow){
      case 'GET_NAME':
        return (<ComponentTwo/>);
      case 'WELCOME_MSG':
        return (<ComponentThree name={this.state.name} />);
    }

  }

  render() {

    console.log('ComponentOne: ',this.state.workflow );

    return this.setWorkflow();
    /*
      switch(this.state.workflow){
        case 'GET_NAME':
          return (<ComponentTwo/>);
        case 'WELCOME_MSG':
          return (<ComponentThree name={this.state.name} />);
      } */
  }
}

// showThree()



class ComponentTwo extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      workflow: 'GET_NAME',
      name: 'Chris'
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
    this.setWorkflow = this.setWorkflow.bind(this);
  }

  handleChange(e) {
    //this.setState({name: event.target.name});
    e.persist();



    console.log('handleChange event.target.name:', e.target);


    this.setState((prevState, props) => {
      return {
        name: e.target.value,
        workflow: 'WELCOME_MSG',
      }
    })

    /*
          this.setState(state => ({
          //name: this.state.name,
          name: e.target.value,
          //name: "sadfasdf",
    ...