Estoy trabajando con React y Javascript. No estoy seguro de dónde agregar la función. Tengo mi entrada funcionando muy bien, pero me di cuenta de que necesitaba agregar una función o la capacidad de aceptar lo que el usuario ingrese y convertir la cadena en un formato de minúsculas. Intenté ponerlo en el campo de entrada, pero eso solo obliga a que lo que el usuario ingrese en minúsculas, por lo que no funcionó allí.
const {useState} = React; const SearchBar = (props) => { const [songSearch, setSongSearch, ] = useState(""); function searchResults(event) { event.preventDefault(); let response = props.songs.filter((song) => { if (song.album.includes(songSearch) || song.artist.includes(songSearch) || song.title.includes(songSearch) || song.genre.includes(songSearch) || song.release_date.includes(songSearch)){ return true; } }); console.log(response) props.setSongs(response); } return ( <div > <form onSubmit={searchResults}> <div> <input className="search-bar-input" type="text" value={songSearch} onChange={(e) => setSongSearch(e.target.value)} placeholder="Search by: Title, Artist, Album, Release Date and Genre" />{" "} <button className="submit-button" type="submit">Search</button> </div> </form> </div> ); }; const fixedSongs = [...Array(10).keys()] .map(x => x+1) .map(id => ({ album: `Album Num ${id}`, artist: `Artist Num ${id}`, title: `Title Num ${id}`, genre: `Genre Num ${id}`, release_date: `Release Date Num ${id}` })); const Thingy = ({...props}) => { return ( <div> <SearchBar songs={fixedSongs} setSongs={() => {}}/> </div> ); }; ReactDOM.render( <div> DEMO <Thingy /> </div>, document.getElementById("rd") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="rd" />JS tiene String.prototype.toLowerCase()
En lugar de forzar, puede obtener una versión en minúsculas de la entrada, utilizando como:
const lowercaseInput = userInput.toLowercase(); const {useState} = React; const SearchBar = (props) => { const [songSearch, setSongSearch] = useState(""); function searchResults(event) { event.preventDefault(); // obtain "lower-case" version of the user-input (songSearch) const lowerCaseSongSearch = songSearch.toLowerCase(); // avoid listing every column to search by using below array const searchCols = ['album', 'artist', 'title', 'genre', 'release_date']; let response = props.songs.filter((song) => { // find if "songSearch"'s lower-case version exists in any // of the 5 search-columns (ie, album, artist, etc) if ( searchCols.some( // if "some" element (album, artist, etc) k => song[k] // has the lower-case version of "songSearch" .toLowerCase() // matching the lower-case version of album, artist, etc .includes(lowerCaseSongSearch) ) ) { // if lower-case matched, return "true" return true; } }); console.log(response) props.setSongs(response); } return ( <div > <form onSubmit={searchResults}> <div> <input className="search-bar-input" type="text" value={songSearch} onChange={(e) => setSongSearch(e.target.value)} placeholder="Search by: Title, Artist, Album, Release Date and Genre" />{" "} <button className="submit-button" type="submit">Search</button> </div> </form> </div> ); }; const fixedSongs = [...Array(10).keys()] .map(x => x+1) .map(id => ({ album: `Album Num ${id}`, artist: `Artist Num ${id}`, title: `Title Num ${id}`, genre: `Genre Num ${id}`, release_date: `Release Date Num ${id}` })); const Thingy = ({...props}) => { return ( <div> <SearchBar songs={fixedSongs} setSongs={() => {}}/> </div> ); }; ReactDOM.render( <div> DEMO <Thingy /> </div>, document.getElementById("rd") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="rd" />Cuando se ejecute la función searchResults, la búsqueda de canciones se convertirá a minúsculas:
const [songSearch, setSongSearch, ] = useState(""); function searchResults(event) { event.preventDefault(); setSongSearch(prev=>prev.toLowerCase()); let response = props.songs.filter((song) => { if (song.album.includes(songSearch) || song.artist.includes(songSearch) || song.title.includes(songSearch) || song.genre.includes(songSearch) || song.release_date.includes(songSearch)){ return true; } }); console.log(response) props.setSongs(response); }