I am working with React and Javascript I'm not sure where to add the function. I have my input working great--but I realized I needed to add a function or the ability to accept whatever the user puts in and turn the string into a lower case format. I tried putting it in the input field, but that just forces whatever the user puts in to come in as lowercase so it didn't work there.
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 has String.prototype.toLowerCase()
Instead of forcing, you can get lowercased version of the input, by utilising as:
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" />When searchResults function will run , the songSearch would get converted to lowercase :
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);
}