import React, { Component } from 'react'
import './App.css'

class App extends Component {
  constructor (props){
    super(props)
    this.state = {
      text : ' state 1',
      inputText : null,
    }
  }
  render() {
    const handleText1= ()=>{
      this.setState({
        text : 'handleText1'
      })
    }
    const handleText2= ()=>{
      this.setState({
        text : 'handleText2'
      })
    }
    const handleInput = (e)=>{
      this.setState({
        inputText : e.target.value
      })
    }
    return (
      <div>
        {this.state.text}
        <button onClick = {handleText1}> text 1 </button>
        <button onClick = {handleText2}> text 2 </button>
        <br/>
        <input onChange={handleInput}/>
        <p> this is inputText {this.state.inputText} </p>
      </div>
    )
  }
}

export default App