import React, { useState, useEffect } from 'react'; import axios from 'axios'; const Main = () => { const [contentType, setContentType] = useState('movies'); // Default to movies const [data, setData] = useState([]); useEffect(() => { const fetchData = async () => { const API_KEY = process.env.REACT_APP_OMDB_API_KEY; const url = `https://www.omdbapi.com/?apikey=${API_KEY}&s=batman&type=${contentType}`; try { const response = await axios.get(url); setData(response.data.Search); } catch (error) { console.error('Error fetching data:', error); } }; fetchData(); }, [contentType]); return ( <div> <button onClick={() => setContentType('movies')}>Movies</button> <button onClick={() => setContentType('series')}>TV Shows</button> {data.map(item => ( <div key={item.imdbID}> <h3>{item.Title}</h3> <img src={item.Poster} alt={item.Title} /> </div> ))} </div> ); }; export default Main; import React from 'react'; import Navbar from './components/Navbar'; import Main from './components/Main'; const App = () => { return ( <> <Navbar /> <Main /> </> ); }; export default App;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter