Автоматическое обновление Axios с помощью React

Я медленно начинаю свое приключение с React и сижу над этой проблемой несколько дней, хотел изучить аксиомы. Итак, я создаю библиотеку фильмов на основе серверного пакета Json. Все работает очень хорошо, просто я не могу сделать автоматическое обновление после каждого действия, такого как добавление редактирования или удаление нового фильма. Я знаю, что мне нужно каким-то образом передать функцию getMovie в раздел editMovie, deleteMovie и addMovie, но я совершенно не знаю, как это сделать. Я помещаю getMovie в функцию и передаю его componentDidMount для запуска в самом начале, но я не знаю, как передать его в компонент формы, чтобы поместить его в функции редактирования / удаления / добавления. Я пытался сделать это через функцию экспорта, но не вышло. вероятно, мне нужно сделать это через реквизит, но он также не хочет работать на меня :( Я был бы очень благодарен за любую помощь, так как у меня нет идей.

Компонент формы

class Form extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '',
            type: '',
            description: '',
            id: '',
            movies: [],
            errors: "",
        }
    }


    handleChangeEventOne = e => {
        this.setState({
            name: e.target.value
        })
    }
    handleChangeEventTwo = e => {
        this.setState({
            type: e.target.value
        })
    }
    handleChangeEventThree = e => {
        this.setState({
            description: e.target.value
        })
    }


    handleSubmit = e => {
        e.preventDefault()
        const url = `http://localhost:3000/movies/`;
        if (this.state.name != "" && this.state.type != "" && this.state.description != "") {
            axios
                .post(url, {
                    name: this.state.name,
                    type: this.state.type,
                    description: this.state.description,
                    id: this.state.id
                })
                .then(res => {
                    // console.info(res);
                    // console.info(res.data);
                    this.setState({
                        movies: [this.state.name, this.state.type, this.state.description, this.state.id]
                    })
                })
        }
        else {
            this.setState({
                errors:"Please, Fill all forms above"
            })
        }
    }

    handleRemove = e => {
        // const url = `http://localhost:3000/movies/`;
        const url = `http://localhost:3000/movies/${e.id}`;
        axios
            .delete(url)
            .then(res => {
                console.info(res.data);
            })
            .catch((err) => {
                console.info(err);
            })
    }

    editMovie = e => {
        if (this.state.name != "" && this.state.type != "" && this.state.description != "") {
            const url = `http://localhost:3000/movies/${e.id}`;
            axios
                .put(url, {
                    name: this.state.name,
                    type: this.state.type,
                    description: this.state.description,
                })
                .then(res => {
                    console.info(res.data);
                })
                .catch((err) => {
                    console.info(err);
                })
        }
        else {
            this.setState({
                errors:"Please, Fill all forms to edit movie"
            })
        }
    }



    render() {


        return (
            <div>
                <form onSubmit = {this.handleSubmit}>
                    <input type = "text" placeholder = "Movie" onChange = {this.handleChangeEventOne}/>
                    <input type = "text" placeholder = "Type of movie" onChange = {this.handleChangeEventTwo}/>
                    <textarea placeholder = "Description of the movie"
                              onChange = {this.handleChangeEventThree}></textarea>
                    <input id = "addMovie" type = "submit" value = "Add movie" ></input>
                    <p>{this.state.errors}</p>
                </form>
                <List removeClick = {this.handleRemove} editClick = {this.editMovie}/>
            </div>
        )
    }
}

Компонент списка

class List extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            movies: [],
        }
    }

    componentDidMount() {
        this.getMovie()

    }
     getMovie = () => {
        const url = `http://localhost:3000/movies`;
        console.info(url);
        axios
            .get(url)
            .then(res => {
                console.info(res.data);
                const movies = res.data;
                this.setState({
                    movies: movies,
                })
            })
            .catch((err) => {
                console.info(err);
            })
        }
    // }




    editMovie = (event, e) => {
        event.preventDefault();
        console.info("it works with edit!");
        if (typeof this.props.editClick === "function") {
            this.props.editClick(e)
        } else {
            console.info("Doesn't work with edit");
        }
    }


    removeMovie = (event, e) => {
        event.preventDefault();
        console.info("it works with remove!");
        if (typeof this.props.removeClick === "function") {
            this.props.removeClick(e)
        } else {
            console.info("Doesn't work with remove");
        }
    }


    render() {

        return (
            <div className = "movieList">
                {this.state.movies.map(e =>
                    <ul>
                        <li data-id = {e.id} onClick = {event => this.editMovie(event, e)}>
                            Title: {e.name}
                        </li>
                        <li data-id = {e.id} onClick = {event => this.editMovie(event, e)}>
                            Type: {e.type}
                        </li>
                        <li data-id = {e.id} onClick = {event => this.editMovie(event, e)}>
                            Description: {e.description}
                        </li>
                        <button className = "removeMovie" type = "submit" onClick = {event => this.removeMovie(event, e)}>Delete</button>
                    </ul>)}
            </div>
        )
    }
}