Codecademy export

App.js

import React from 'react';
import GroceryItem from './GroceryItem';

function App() {
  return (
    <GroceryItem>
      <li>Eggs</li>
      <li>Banana</li>
      <li>Strawberry</li>
      <li>Bread</li>
    </GroceryItem>
  );
}

export default App

GroceryItem.js

import React, { useState } from 'react';

function GroceryItem(props) {
  const [showList, setShowList] = useState(false);

  function handleClick() {
    setShowList(!showList);
  }

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      {showList && (
        <ul>{props.children}</ul>
      )}
    </div>
  );
}

export default GroceryItem;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';

import App from './App';

ReactDOM.createRoot(
  document.getElementById('app')
).render(<App />);