import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import Grocery from './Grocery';


const Toggle = ({action}) => {
  const [b, setB] = useState(true);
  const onclick = () => {
    setB(!b);
    action(b);
  }
  return (
    <div>
      <p>sd</p>
      <button onClick={onclick}>{b ? 'True': 'False'}</button>
    </div>

  );
 
}

const Counter = () => {
  const [c, setC] = useState(1);
  return (
    <button onClick={() => setC(c + 1)}>{c}</button>
  );
}

const App = () => {
  const [d, setD] = useState(1);
  const actionToggle = (v) => {
    setD(v ? d + 1 : d);
  }
  return (
    <div>
        <p>N true : {d}</p>
        <Toggle action={actionToggle}/>
        <Counter />
        <Grocery />
    </div>
  );
}

export default App;
