React

by richard929

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',
      name: 'Chris'
    }

    this.setWorkflow = this.setWorkflow.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.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',
      }
  	})
  }
  
  handleClick(e) {
    //console.log(this.state);

    //e.preventDefault();

    console.log('BEFORE handleClick this STATE ON CLICK :', this.state.workflow);

    console.log('this.state.name:', this.state.name);


    this.setState((prevState, props) => {
      return {
        workflow: 'WELCOME_MSG',
        name: this.state.name,
      }
    })
  }
    
  setWorkflow() {
    switch(this.state.workflow){
      case 'GET_NAME':
        return (<ComponentTwo name={this.state.name} handleClick={this.handleClick} handleChange={this.handleChange} />);
      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...