This is my searchbar with suggestions component that I'm working on:

import React from 'react';
import { FiSearch } from 'react-icons/fi';
import '../CSS/SearchBar.css'
import productsData from './../productsData.json'
import 'bootstrap/dist/css/bootstrap.min.css'
    
class SearchBar extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          typed:""
        }
    
        this.userTyped = this.userTyped.bind(this);
      }  
    
      userTyped(e) {
        this.setState({
          typed: e.target.value
        })
      }
      
      render() {
    
        return (
          <div className='searchbar'>
            <div className='wrapper'> 
              <input 
              type='text'
              value={this.state.typed}
              onChange={this.userTyped}
              />
    
              <button>
                <FiSearch size={18}/>
              </button>
            </div>
    
            <ul className='list-group suggestions'>
              {productsData.map((item) => {
                return (
                  <button id='list-item' className='list-group-item list-group-item-action'>
                    {item.title}
                    </button>
    
                )
              })};
              
            </ul> 
          </div>
        )
      }
      

}

The map function uses productsData that is a json file with five items in it.

And this is what the semicolon I'm confused about. Its at the bottom of the list: my searchbar

I was wondering if the cause of this is returning my button element, but I wasn't sure how else to go about it.

Would appreciate any help! Pretty new at this.