ReactJS App with REST API data is not displaying data correctly

Question

I am trying to make a React app that allows a user to select from the list of movies requested from a REST API I created. Once the user selects the movie, it displays the url as listed in the JSON API. I've researched many videos and articles and I'm not getting anywhere. Any help is appreciated to help me achieve what I am trying to do with this website. Attached is the screenshot of my progress so far and my code is below. I access the REST api through json-server --watch [json filename]

Movies.js

export default function Movies() {
    const [error, setError] = useState(null);
    const [isLoaded, setIsLoaded] = useState(false); 
    const [movies, setMovies] = useState([]);

    const url = "http://localhost:8900/movies";[![enter image description here][1]][1]

    useEffect(() => {
        fetch(url)
            .then(res => res.json())
            .then(
                (result) => {
                    setIsLoaded(true);
                    setMovies(result);
                },
                (error) => {
                    setIsLoaded(true);
                    setError(error);
                }
            )
    }, [])

    if (error) {
        return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
        return <div>Loading...</div>;
    } else {
        return (
            <div>
                <select value={(movies.title)}>
                    {movies.map(movie => (
                            <option value={movie.id}>
                                {movie.title}
                            </option>
                    ))}
                </select>
                <ul>
                {movies.map(item => (
                    <li>
                        <a href={item.url}>{item.title}</a>
                    </li>
                ))}
                </ul>
            </div>
        );
    }
}

test.json

{
  "movies" : [
    {
      "id": 1,
      "title": "Space Jam: A New Legacy",
      "url": "https://www.imdb.com/title/tt3554046/"
    },
    {
      "id": 2,
      "title": "The War With Grandpa",
      "url": "https://www.imdb.com/title/tt4532038/"
    },
    {
      "id": 3, 
      "title": "Ghostbusters (1984)",
      "url": "https://www.imdb.com/title/tt0087332/"
    },
    {
      "id": 4,
      "title": "Ghostbusters: Afterlife",
      "url": "https://www.imdb.com/title/tt4513678/"
    },
    {
      "id": 5,
      "title": "Cruella",
      "url": "https://www.imdb.com/title/tt3228774/"
    },
    {
      "id": 6, 
      "title": "Here Today",
      "url": "https://www.imdb.com/title/tt10944596/"
    },
    {
      "id": 7,
      "title": "The French Dispatch",
      "url": "https://www.imdb.com/title/tt8847712/"
    },
    {
      "id": 8,
      "title": "Dazed and Confused",
      "url": "https://www.imdb.com/title/tt0106677/"
    },
    {
      "id": 9, 
      "title": "Together Together",
      "url": "https://www.imdb.com/title/tt11285280/"
    }
  ]
}

Batonnet2Coton · Accepted Answer · 2022-06-21 23:53:03Z

1

You have to create a new state value selectedMovie then update it when your select change :

const [selectedMovie, setSelectedMovie] = useState(movies[0]) // you can set whatever you want by default

const handleChange = (m) => {
  setSelectedMovie(JSON.parse(m.target.value));
}

Then, your select :

<select value={setSelectedMovie.title} onChange={(e) => handleChange(e)}>
        {movies.map((movie) => (
          <option key={movie.id} value={JSON.stringify(movie)}>{movie.title}</option>
        ))}
</select>

Then, you just have to display selectedMovie on your page

{ selectedMovie ? <a href={selectedMovie.url}>{selectedMovie.title}</a> : <p>Select movie</p> }

edited Jun 21, 2022 at 23:53

answered Jun 16, 2022 at 23:18

Batonnet2Coton

995 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

New CS Developer Over a year ago

Everything worked up until attempting to display selectedMovie, however I was able to incorporate conditional rendering and instead of just displaying the link I used this: {selectedMovie ? <a href={selectedMovie.url}>{selectedMovie.title}</a> : <p>Select movie</p>}

Batonnet2Coton Over a year ago

Ok! I just edited that

Collectives™ on Stack Overflow

ReactJS App with REST API data is not displaying data correctly

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related