Getting this warning "Functions are not valid as a React child" - reactjs

Question

I am trying to render a list of movies from an array object in an html table format. I am getting this warning:
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.
import React from 'react';
import {movies} from '../services/fakeMovieService';
class Movies extends React.Component {
constructor(props) {
super(props);
this.tableFormat = this.tableFormat.bind(this);
}
tableFormat() {
movies.map((movie) => {
return (
<tr>
<td key={movie._id}>{movie.title}</td>
</tr>
);
});
}
render() {
return (
<table className="table">
<thead>
<tr>
<th>Title</th>
<th>Genre</th>
<th>Stock</th>
<th>Rate</th>
</tr>
</thead>
<tbody>
{this.tableFormat()}
</tbody>
</table>
);
}
}
export default Movies;

Answer 1

You forgot to call your function.
<tbody>
{this.tableformatter()}
</tbody>
But even by doing, I don't think the result is going to be what you expect.
To render an array of elements in React you should use the map function as said in the docs.
The following result would be :
<tbody>
{movies.map(movie =>
<tr key={movie.title}>
<td>{movie.title}</td>
</tr>
)}
</tbody>
EDIT:
I made a typo and put movies instead of movie.
The following code should do everything you are looking for using map and inline conditions:
const movies = [
{
title: "Spooky",
genre: 'eziojgf',
stock: 'nope',
rate: 87
},
{
title: "Sharknado",
genre: 'shitty',
stock: 'yes',
},
{
title: "haha yes"
},
{
title: "uhmmmm",
rate: -5
}
]
class Movies extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<table className="table">
<thead>
<tr>
<th>Title</th>
<th>Genre</th>
<th>Stock</th>
<th>Rate</th>
</tr>
</thead>
<tbody>
{movies.map(movie =>
<tr key={movie.title}>
{['title', 'genre', 'stock', 'rate'].map(category => <td key={category}>{movie[category]}</td>)}
</tr>
)}
</tbody>
</table>
);
}
}
ReactDOM.render(<Movies />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.1/umd/react-dom.production.min.js"></script>
<div id='root'>

Answer 2

Please execute function as following:
<tbody>
{this.tableformatter()}
</tbody>

Answer 3

here is the right way how to resolve this with React
function TableFormatter ({title /* , and other props genre, rate etc. *//}) {
return (
<tr>
<td>{title}</td>
{/* you may want to add other td here *//}
</tr>
)
}
function Table({movies}) {
render() {
return (
<table className="table">
<thead>
<tr>
<th>Title</th>
<th>Genre</th>
<th>Stock</th>
<th>Rate</th>
</tr>
</thead>
<tbody>
{movies.map(movie => <TableFormatter key={movie.id} {...movie} />)}
</tbody>
</table>
);
}
}