React.js – Functions are not valid as a React child

November 1, 2022

I am new to React.js. I can’t solve the problem. I am getting this warning:
Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

App.js

import React from 'react';
import MovieList from './MovieList';
import SearchBar from './SearchBar';
import AddMovie from './AddMovie';
import axios from 'axios'
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"

class App extends React.Component {
    state = {
        movies: [],

        searchQuery: ""
    }

    async componentDidMount() {
        const response = await axios.get("http://localhost:3002/movies")
        this.setState({movies: response.data})
    }

    deleteMovie = async (movie) => {
        axios.delete(`http://localhost:3002/movies/${movie.id}`)
        const newMovieList = this.state.movies.filter(
            m => m.id !== movie.id
        )
        this.setState(state => ({
            movies: newMovieList
        }))
    }


    searchMovie = (event) => {
        this.setState({searchQuery: event.target.value })
    }

    render() {

        let filteredMovies = this.state.movies.filter(
            (movie) => {
                return movie.name.toLowerCase().indexOf(this.state.searchQuery.toLowerCase()) !== -1
            }
        )

        return (
            <Router>
                <div className="container">
                    <Routes>
                        <Route path='/' exact element={() =>(
                            <React.Fragment>
                                <div className="row">
                                    <div className="col-lg-12">
                                        <SearchBar const searchMovieProp={this.searchMovie()} />
                                    </div>
                                </div>
        
                                <MovieList
                                    movies={filteredMovies()}
                                    deleteMovieProp={this.deleteMovie()} 
                                />
                            </React.Fragment>
                        )}>
                        </Route>

                        <Route path='/add' element={<AddMovie />} />
                    </Routes>   
                </div>
            </Router>
        )
    }
}
export default App;

What am I doing wrong?

Thanks in advance.

>Solution :

Passing a function to a route like you did:

<Route path='/' exact element={() =>(
  <React.Fragment>
    <div className="row">
      <div className="col-lg-12">
        <SearchBar const searchMovieProp={this.searchMovie()} />
      </div>
    </div>
    <MovieList
      movies={filteredMovies()}
      deleteMovieProp={this.deleteMovie()} 
    />
  </React.Fragment>
)}>

looks like a router v5 syntax. This is not working in v6: you should pass an element, which is different than a function producing an element. Something like this would work:

<Route path='/' exact element={(
  <React.Fragment>
    <div className="row">
      <div className="col-lg-12">
        <SearchBar const searchMovieProp={this.searchMovie()} />
      </div>
    </div>
    <MovieList
      movies={filteredMovies()}
      deleteMovieProp={this.deleteMovie()} 
    />
  </React.Fragment>
)}>