import React from 'react';

const fruits = [{ name: 'Banana' }, { name: 'Strawberry' }, { name: 'Grape' }];

function App() {
  const renderList = () =>
    fruits.map(fruit => (
      <li>
        {/* custom 'tooltip-item' attribute */}
        <span tooltip-item={fruit.name} className='fruit-label'>
          {fruit.name}
        </span>
      </li>
    ));

  return (
    <div className='container'>
      <ul className='fruits-list'>{renderList()}</ul>
    </div>
  );
}

export default App;