Заставить строку ввода пользователя преобразовать в нижний регистр

Я работаю с React и Javascript. Я не знаю, куда добавить функцию. У меня отлично работает ввод, но я понял, что мне нужно добавить функцию или возможность принимать все, что вводит пользователь, и переводить строку в формат нижнего регистра. Я попытался поместить его в поле ввода, но это просто заставляет все, что вводит пользователь, вводить в нижнем регистре, поэтому там это не сработало.

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" />

Решение проблемы

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" />