Force User input string to turn into lowercase

Question

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

Answer 1

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

Answer 2

JS has String.prototype.toLowerCase()

Instead of forcing, you can get lowercased version of the input, by utilising as:

const lowercaseInput = userInput.toLowercase();

Answer 3

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