Esta es mi barra de búsqueda con el componente de sugerencias en el que estoy trabajando:

 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> ) } }

La función map usa productsData, que es un archivo json con cinco elementos.

Y esto es lo que me confunde con el punto y coma. Está al final de la lista: mi barra de búsqueda

Me preguntaba si la causa de esto es devolver mi elemento de botón, pero no estaba seguro de cómo hacerlo.

¡Agradecería cualquier ayuda! Bastante nuevo en esto.