I'm trying to create a new button that lists out all the movies that Sean Connery played in, but I'm not sure how to implement it. 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) => {
        const mappedArray = (response.data)
          .map((item) => item[type] || (type === "directors" && item.director) || (type === "title_song" && item.title_song) || (type === "movie_year" && item.movie_year))
          .filter((uniqueVal) => uniqueVal);
        setUsers({ [type]: Array.from([...new Set(mappedArray)])});
      });
  const fetchSeanConnery = (name) =>{

  }
  };

  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, index) => (
              <li key={index}><a href="https://iznfqs92n3.execute-api.us-west-1.amazonaws.com/dev/api/v2/movies">{user}</a></li>
            ))}
          </ul>
        )}
      </div>
      <div>
        <Button onClick={() => fetchData("directors")}>Directors</Button>
        {users && (
          <ul>
            {users?.directors?.map((director) => (
              <li key={director}>{director}</li>
            ))}
          </ul>
        )}
      </div>
      <div>
        <Button onClick={() => fetchData("title_song")}>Songs</Button>
        {users && (
          <ul>
            {users?.title_song?.map((title_song) => (
              <li key={title_song}>{title_song}</li>
            ))}
          </ul>
        )}
      </div>
      <div>
        <Button onClick={() => fetchData("movie_year")}>Movie Year</Button>
        {users && (
          <ul>
            {users?.movie_year?.map((movie_year) => (
              <li key={movie_year}>{movie_year}</li>
            ))}
          </ul>
        )}
      </div>
      <div>
        <Button>Sean Connery's List of Movies</Button>
      </div>
    </div>
  );
}

export default ButtonClick;

I saw a way to use Json.parse, but it didn't work when I tried it, so I would appreciate it if I could get some assistance on this. Thank you!

CodePudding user response：

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 [movies, setMovies] = useState();
  const fetchData = (type) => {
    axios
      .get(
        "https://iznfqs92n3.execute-api.us-west-1.amazonaws.com/dev/api/v2/movies"
      )
      .then((response) => {
        const mappedArray = response.data
          .map(
            (item) =>
              item[type] ||
              (type === "directors" && item.director) ||
              (type === "title_song" && item.title_song) ||
              (type === "movie_year" && item.movie_year)
          )
          .filter((uniqueVal) => uniqueVal);
        setUsers({ [type]: Array.from([...new Set(mappedArray)]) });
      });
  };

  const fetchActorsMovies = (name) => {
      axios
      .get(
        "https://iznfqs92n3.execute-api.us-west-1.amazonaws.com/dev/api/v2/movies"
      ).then(response => {
        setMovies(response.data.filter(item => item.bond_actor === name).map(item => item.movie_title));
      })
    };

  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, index) => (
              <li key={index}>
                <a href="https://iznfqs92n3.execute-api.us-west-1.amazonaws.com/dev/api/v2/movies">
                  {user}
                </a>
              </li>
            ))}
          </ul>
        )}
      </div>
      <div>
        <Button onClick={() => fetchData("directors")}>Directors</Button>
        {users && (
          <ul>
            {users?.directors?.map((director) => (
              <li key={director}>{director}</li>
            ))}
          </ul>
        )}
      </div>
      <div>
        <Button onClick={() => fetchData("title_song")}>Songs</Button>
        {users && (
          <ul>
            {users?.title_song?.map((title_song) => (
              <li key={title_song}>{title_song}</li>
            ))}
          </ul>
        )}
      </div>
      <div>
        <Button onClick={() => fetchData("movie_year")}>Movie Year</Button>
        {users && (
          <ul>
            {users?.movie_year?.map((movie_year) => (
              <li key={movie_year}>{movie_year}</li>
            ))}
          </ul>
        )}
      </div>
      <div>
        <Button onClick={() => fetchActorsMovies("Sean Connery")}>Sean Connery's List of Movies</Button>
        {movies && (
          <ul>
            {movies?.map((movie) => (
              <li key={movie}>{movie}</li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}

export default ButtonClick;