Removing Duplicates in Axios React JS

This is my code to display all the bond actors and directors, but when displaying, it has multiple of the same names, and I want to remove the duplicates. Prettier 2.7.1 Playground link

--parser babel

Input:

import React, { useState } from "react";
import styled from "styled-components";
import axios from "axios";

const Button = styled.button`
    background-color: black;
    color: white;
    font-size: 20px;
    padding: 10px 60px;
    border-radius: 5px;
    margin: 10px 0px;
    cursor: pointer;
  `;


function ButtonClick() {
  

  const [users, setUsers] = useState();
  const fetchData = (type) => {
    axios.get("https://iznfqs92n3.execute-api.us-west-1.amazonaws.com/dev/api/v2/movies")
      .then((response) => {
        setUsers({ [type]: Array.from(new Set(response.data))});
      });
  };

  return (
    <div>
      <div>
        <h2>Bond Database</h2>
        <h5>Click on the buttons to see the list of all the bond movie's directors, bond actors, release year, and title songs</h5>

        <Button onClick={() => fetchData("bond_actor")}>Bond Actors</Button>
        {users && (
          <ul>
            {users?.bond_actor?.map((user) => (
              <li key={user.id}>{user.bond_actor}</li>
            ))}
          </ul>
        )}
      </div>
      <div>
        <Button onClick={() => fetchData("directors")}>Directors</Button>
        {users && (
          <ul>
            {users?.directors?.map((user) => (
              <li key={user.id}>{user.director}</li>
            ))}
          </ul>
        )}
      </div>
      <div>
        <Button onClick={() => fetchData("title_song")}>Songs</Button>
        {users && (
          <ul>
            {users?.title_song?.map((user) => (
              <li key={user.id}>{user.title_song}</li>
            ))}
          </ul>
        )}
      </div>
      <div>
      <Button onClick={() => fetchData("movie_year")}>Movie Year</Button>
        {users && (
          <ul>
            {users?.movie_year?.map((user) => (
              <li key={user.id}>{user.movie_year}</li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}

export default ButtonClick;

I tried an Array, and a Set in fetchData, but I'm having trouble implementing it. I'm just not sure if I'm putting the proper code in the right place. I would appreciate it if I get some assistance on this. Thank you!

Via Active questions tagged javascript - Stack Overflow https://ift.tt/HOGBID2