Getting Table to Filter based on choices

user_18969126 0
Viewed 30

Created this in React--I'm having a hard time getting it to filter the search and display results.

I want to have the option to search by Title, Artist, Album, Release Date, Genre, and Likes,

I have tried putting the input bar in different locations

Can anyone point me in the correct direction?

// please add sample data here and remove this comment
const parentSongs = [
  {
    title: "a",
    artist: "a",
    album: "a",
    release_date: "a",
    genre: "a",
    likes: "a",
  },
  {
    title: "b",
    artist: "b",
    album: "b",
    release_date: "b",
    genre: "b",
    likes: "b",
  },
  {
    title: "c",
    artist: "c",
    album: "c",
    release_date: "c",
    genre: "c",
    likes: "c",
  },
];

const DisplayMusic = (props) => {
  const [search, setSearch] = React.useState("");

  let songList = props.parentSongs.filter(function (el) {
    if (
      el.album.includes(search) &&
      el.artist.includes(search) &&
      el.genre.includes(search) &&
      el.release_date.includes(search) &&
      el.title.includes(search)
    ) {
      return true;
    }
  });
  return (
    <table className="table">
      <thead>
        <input
          className="search"
          type="text"
          placeholder="Search"
          onChange={(event) => setSearch(event.target.value)}
        />
        <tr>
          <th>Title</th>
          <th>Artist</th>
          <th>Album</th>
          <th>Release Date</th>
          <th>Genre</th>
          <th>Likes</th>
        </tr>
      </thead>
      <tbody>
        {songList.map((song) => {
          return (
            <React.Fragment>
              <tr key={song.id}>
                <td>{song.title}</td>
                <td>{song.artist}</td>
                <td>{song.album}</td>
                <td>{song.release_date}</td>
                <td>{song.genre}</td>
                <td>{song.likes}</td>
              </tr>
            </React.Fragment>
          );
        })}
      </tbody>
    </table>
  );
};

ReactDOM.render(<DisplayMusic parentSongs={parentSongs}/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

reactjs javascript
1 Answers

Try changing the conditions on filter. As @Mushroomator mentioned change it || instead of &&

let songList = props.parentSongs.filter(function (el) {
  if (
    el.album.includes(search) ||
    el.artist.includes(search) ||
    el.genre.includes(search) ||
    el.release_date.includes(search) ||
    el.title.includes(search)
  ) {
    return true;
  }
});

// or simply (considering checking all the properties on song object)

let songList = props.parentSongs.filter((song) =>
  Object.values(song).some((item) => item.includes(search))
);


const DisplayMusic = (props) => {
  const [search, setSearch] = React.useState("");

  let songList = props.parentSongs.filter(function (el) {
    if (
      el.album.includes(search) ||
      el.artist.includes(search) ||
      el.genre.includes(search) ||
      el.release_date.includes(search) ||
      el.title.includes(search)
    ) {
      return true;
    }
  });
  return (
    <div>
      <input
        className="search"
        type="text"
        placeholder="Search"
        onChange={(event) => setSearch(event.target.value)}
      />
      <div>
        <table className="table">
          <thead>
            <tr>
              <th>Title</th>
              <th>Artist</th>
              <th>Album</th>
              <th>Release Date</th>
              <th>Genre</th>
              <th>Likes</th>
            </tr>
          </thead>
          <tbody>
            {songList.map((song) => {
              return (
                <tr key={song.id}>
                  <td>{song.title}</td>
                  <td>{song.artist}</td>
                  <td>{song.album}</td>
                  <td>{song.release_date}</td>
                  <td>{song.genre}</td>
                  <td>{song.likes}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
};

const data = [
  {
    title: "a",
    artist: "a",
    album: "a",
    release_date: "a",
    genre: "a",
    likes: "a",
  },
  {
    title: "b",
    artist: "b",
    album: "b",
    release_date: "b",
    genre: "b",
    likes: "b",
  },
  {
    title: "c",
    artist: "c",
    album: "c",
    release_date: "c",
    genre: "c",
    likes: "c",
  },
];


ReactDOM.render(
  <DisplayMusic parentSongs={data} />,
  document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

user_78994770
Related