text: import React, { useState } from 'react'
  import ReactDOM from 'react-dom'
  
  
  
  const App = () => {
      // save clicks of each button to own state
      const [good, setGood] = useState(0)
      const [neutral, setNeutral] = useState(0)
      const [bad, setBad] = useState(0)
  
      const Button = (props) => (
          <button onClick={props.onClick}>
              {props.text}
          </button>
      )
  
      const Statistic = (props) => (
          <tr><td>{props.label}</td> <td>{props.value}</td></tr>
      )
      const AllStats = () => {
          return(
          <table>
                  <Statistic label='good' value={good} />
                  <Statistic label='neutral' value={neutral} />
                  <Statistic label='bad' value={bad} />
                  <Statistic label='total' value={good + neutral + bad} />
                  <Statistic label='average' value={good/(good + neutral + bad)} />
          </table>
          )
      }
  
      return (
          <div>
              <h1>give feedback</h1>
              <div>
                  <Button onClick={() => setGood(good + 1)} text="good" />
                  <Button onClick={() => setNeutral(neutral + 1)} text="neutral" />
                  <Button onClick={() => setBad(bad + 1)} text="bad" />
              </div>
              <div>
                  <h1>Statistics</h1>
                  <AllStats/>
              </div>
          </div>
      )
  }
  
  ReactDOM.render(<App />,
      document.getElementById('root')
  )