I have this ReactJS task about an anime/movie app it has 2 functions :

• Show a list of animes.
• Add a new anime.

So I have 4 components , , and .

: is the parent component and passes the initial data to as a props.

: Her role is to map the data and send it to to show the anime list and have a modal where I can add a new anime (Title , Poster link and Rate)

So I have everything working great and when I add an anime I push it to the initial list of anime but my problem is the new anime isn't displayed on the screen (even if I do a console log for the new anime list the added anime is there https://i.sstatic.net/ZnrkF.png)

App.js :

import './App.css';
import {MovieList} from './Component/MovieList';
import {useState} from 'react';

function App() {
  const [anime, setAnime] = useState(
    [
      {id: 0,
      title: "Naruto Shippuden",
      posterUrl: "https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/8b20ec10-f577-44b1-a687-a9fc2564d52f/dab0b2w-9238451c-4b87-4b9f-99d7-9e2b0cb30da2.jpg/v1/fill/w_1024,h_1586,q_75,strp/poster_naruto_shippuden_by_mardarkangel1992mgp_dab0b2w-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3siaGVpZ2h0IjoiPD0xNTg2IiwicGF0aCI6IlwvZlwvOGIyMGVjMTAtZjU3Ny00NGIxLWE2ODctYTlmYzI1NjRkNTJmXC9kYWIwYjJ3LTkyMzg0NTFjLTRiODctNGI5Zi05OWQ3LTllMmIwY2IzMGRhMi5qcGciLCJ3aWR0aCI6Ijw9MTAyNCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.iHPoBQfHVbYKzUZ3kWu5KveeyffgSOwlGgYr9WkOfEc",
      rate: 5},
      {id: 1,
      title: "Black Clover",
      posterUrl: "https://static.displate.com/857x1200/displate/2020-02-18/06370f834c61107777c20b5bd0e7e5a2_f2b71d649b76a53e64211db5fe334d60.jpg",
      rate: 4},
      {id: 2,
      title: "Hunter x Hunter",
      posterUrl: "https://static.displate.com/857x1200/displate/2019-11-12/8b4744175be6627262352847416162d8_208c7192d992b246aebd9d599f47a43d.jpg",
      rate: 5},
      {id: 3,
        title: "Black Clover",
        posterUrl: "https://static.displate.com/857x1200/displate/2020-02-18/06370f834c61107777c20b5bd0e7e5a2_f2b71d649b76a53e64211db5fe334d60.jpg",
        rate: 4},
      {id: 4,
        title: "Black Clover",
        posterUrl: "https://static.displate.com/857x1200/displate/2020-02-18/06370f834c61107777c20b5bd0e7e5a2_f2b71d649b76a53e64211db5fe334d60.jpg",
        rate: 4}
    ]
  )


  return (
    

      
Movie App!
      
      
    
  );
}

export default App;

MovieList.js :

import {MovieCard} from './MovieCard';
import {AddMovieV2} from './AddMovieV2';

export const MovieList = ({animelist}) => {
    const handleOk = (term) => {
        animelist.push(term);
        console.log(term);
        console.log(animelist);
    };
    return (
        

            
            {animelist.map((el) => (
                
            ))}
            
        
    );
}

AddMovieV2.js :

import {useState} from 'react';
import { Modal, Button } from 'antd';
import 'antd/dist/antd.css';

export const AddMovieV2 = (props) => {
    //React Hooks
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [modalInputTitle, setModalInputTitle] = useState('');
    const [modalInputPoster, setModalInputPoster] = useState('');
    const [modalInputRating, setModalInputRating] = useState('');
    //Modal Show On/Off
    const showModal = () => {
        setIsModalVisible(true);
    };
    const handleOk = () => {
        props.onOk({title : modalInputTitle,posterUrl : modalInputPoster,rate : modalInputRating});
        setIsModalVisible(false);
    };
    const handleCancel = () => {
        setIsModalVisible(false);
    };

    //Get data from modal and passed to MovieList as a callback function
    const modalTitleHandler = e => {
        setModalInputTitle(e.target.value)
    };
    const modalPosterHandler = e => {
        setModalInputPoster(e.target.value)
    };
    const modalRatingHandler = e => {
        setModalInputRating(e.target.value)
    };

    return (
    <>
        
            Add Anime
        
        
            Anime title :
            
            
            Anime Poster :
            
            
            Anime Rating :
            
        
        
    
    );
}

MovieCard.js :

import StarRatingComponent from 'react-star-rating-component';

export const MovieCard = ({item}) => {
    return (
        

            
Title : {item.title}
            
            


            
        
    );
}

This my codesandbox code : https://codesandbox.io/s/nervous-leavitt-xlv30?fontsize=14&hidenavigation=1&theme=dark

When you add a new anime check the console!!