Recommended.js

import React,  {useEffect, useState} from 'react';
import { fade, makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import InputBase from '@material-ui/core/InputBase';
import Badge from '@material-ui/core/Badge';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import MenuIcon from '@material-ui/icons/Menu';
import { List, Header, Rating  } from "semantic-ui-react";
import SearchIcon from '@material-ui/icons/Search';
import AccountCircle from '@material-ui/icons/AccountCircle';
import MailIcon from '@material-ui/icons/Mail';
import NotificationsIcon from '@material-ui/icons/Notifications';
import MoreIcon from '@material-ui/icons/MoreVert';
import NavBar from './NavBar.js';
import { MoviesRecommended } from './MoviesRecommended.js';

const useStyles = makeStyles((theme) => ({
    title: {
        color: 'white',
        fontSize: '25pt',
        marginTop: '9px',
        marginBottom: '9px',
        marginLeft: '5px',
        letterSpacing: '3px'
    },
     categoryTitle: {
        color: 'white',
        fontSize: '25pt',
        marginTop: '9px',
        marginBottom: '9px',
        marginLeft: '35px',
        letterSpacing: '3px'
    },
    container: {
        height: 'auto',
    },
    cover: {
        width:'220px',
        height:'320px',
        position: 'relative',
    },
    movieCard: {
        marginTop: '0px',
        marginBottom: '10px',
        marginRight: '10px',
        marginLeft: '10px',
        float: 'left',
        width: '220px',
        height: '320px',
        position: 'relative',
        '&:hover>div': {
            opacity:1,
            transition:'opacity .25s ease-in-out',
        },
        '&:hover>img': {
            opacity:0.1,
            transition:'opacity .25s ease-in-out',
        }, 
    },
    movieCardHover: {
        textAlign: 'justify',
        position: 'absolute',
        top: '3px',
        color: 'white',
        margin: '0px 10px',
        fontSize: '10pt',
        opacity: '0',
        cursor:'pointer'
    },
    movieDetails: {
        marginTop: '5px',
        fontSize: '12pt'
    }
}));

export default function Recommended() {
    const classes = useStyles();
    const [moviesRecommended, setMoviesRecommended] = useState([]);
    const [copy, setCopy] = useState([]);
    const userID=localStorage.getItem('userid')
    const token=localStorage.getItem('authorization')
    useEffect(()=> {
			fetch('https://arthur-laura-5000.codio-box.uk/recommended', { method: "POST", credentials: 'include', headers: {'Content-type': 'application/json','Authorization': token}, body: JSON.stringify(userID)  }).then(response =>response.json().then(data => {setMoviesRecommended(data.moviesRecommended);
			})
		);
	},[]);
    console.log(moviesRecommended)
    return (
        <div>
        {moviesRecommended.map(movie => {
            return (
                <div className={classes.container}>
                    <p className={classes.title}>Because you like {movie.category} movies</p>
                    <MoviesRecommended movies={movie.movies}/>
                </div>
                );
			})}
        </div>
    );
}