Autofruit.js

import React from 'react';
import {useState} from 'react';

const FRUITS = [
  'Açaí', 'Apple', 'Akee', 'Apricot', 'Avocado', 'Banana', 'Bilberry',
  'Blackberry', 'Blackcurrant', 'Black sapote', 'Blueberry', 'Boysenberry',
  'Crab apples', 'Currant', 'Cherry', 'Cloudberry', 'Coconut', 'Cranberry',
  'Cucumber', 'Damson', 'Date', 'Dragonfruit', 'Durian', 'Elderberry',
  'Feijoa', 'Fig', 'Goji berry', 'Gooseberry', 'Grape', 'Raisin',
  'Grapefruit', 'Guava', 'Honeyberry', 'Huckleberry', 'Jabuticaba',
  'Jackfruit', 'Jambul', 'Japanese plum', 'Jostaberry', 'Jujube',
  'Juniper berry', 'Kiwano', 'Kiwifruit', 'Kumquat', 'Lemon', 'Lime',
  'Loquat', 'Longan', 'Lychee', 'Mango', 'Mangosteen', 'Marionberry', 'Melon',
  'Cantaloupe', 'Honeydew', 'Watermelon', 'Miracle fruit', 'Mulberry',
  'Nectarine', 'Nance', 'Olive', 'Orange', 'Blood orange', 'Clementine',
  'Mandarine', 'Tangerine', 'Papaya', 'Passionfruit', 'Peach', 'Pear',
  'Persimmon', 'Plantain', 'Plum', 'Prune', 'Pineapple', 'Pineberry',
  'Plumcot', 'Pomegranate', 'Pomelo', 'Purple mangosteen', 'Quince',
  'Raspberry', 'Salmonberry', 'Rambutan', 'Redcurrant', 'Salal berry',
  'Salak', 'Satsuma', 'Soursop', 'Star apple', 'Star fruit', 'Strawberry',
  'Surinam cherry', 'Tamarillo', 'Tamarind', 'Ugli fruit', 'Yuzu',
  'White currant', 'White Sapote',
];

const FruitItem = ({name}) => {



  return (
    <li>{name}</li>
  )
}

const FruitList = ({fruits, text, setName}) => {
  const clickFruit = (evt) => {
    console.log(evt.target.getAttribute('name'))
    setName(evt.target.getAttribute('name'));
  }


  return (
    <ul>
      {fruits.map(fruit => (fruit.toLowerCase().startsWith(text) && <li onClick={clickFruit} name={fruit}>{fruit}</li>))}
    </ul>
  )
}

const AutoFruit = () => {
  const [text, setText] = useState('');

  const handleOpen = () => {
    console.log(text);
  }

  const onChange = (evt) => {
    setText(evt.target.value);
  }

  return (
    <div class="container">
      <h1>Autofruit</h1>
      <label for="fruit">Enter your favorite fruit:</label>
      <input value={text} onChange={onChange} onClick={handleOpen} name="fruit" type="text" />
      <FruitList fruits={FRUITS} text={text} setName={setText}/>
    </div>
  );
};




export default AutoFruit;