Andyvlz/build-a-random-quote-machine.markdown

## build-a-random-quote-machine.markdown

      
    Raw
  

              build-a-random-quote-machine.markdown
            
          
    Build a Random Quote Machine

A Pen by Andrew on CodePen.
License.

  
## index.html
<body>
  <div id="rect"></div>
</body>

## script.babel
class Visual extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      quote:["Hello","Welcome"]
    }
    this.Handler = this.Handler.bind(this);
  }
  Handler(){
   this.setState({
     quote: "33"
   }

   )
  }
render(){
  return(
   <div>
   <p>{this.state.quote}</p>
     <button onClick={this.Hander}>Submit</button>
   </div>
  )
}
}

ReactDOM.render(<Visual/>,document.getElementById("rect"))

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
	class Visual extends React.Component{
	constructor(props){
	super(props);
	this.state = {
	quote:["Hello","Welcome"]
	}
	this.Handler = this.Handler.bind(this);
	}
	Handler(){
	this.setState({
	quote: "33"
	}

	)
	}
	render(){
	return(
	<div>
	<p>{this.state.quote}</p>
	<button onClick={this.Hander}>Submit</button>
	</div>
	)
	}
	}

	ReactDOM.render(<Visual/>,document.getElementById("rect"))
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>