Elements not rendering in react - reactjs

Question

I am doing a fetch and storing the result in my state "data", then i am sending this "data" to the function "Showingmovies" , there i am using table tag to align my layout . But the elements are not being rendered from the "Showingmovies" function, i have found that the props are being succesfully passed to the function still it is not rendering.
Below is my complete code -
import React, { Component } from 'react'
function Showingmovies(props){
console.log("in showingmovies",props.mov)
return(
<table>
<tbody>
{props.mov.results.map((mv) =>{
<tr>
<td>
<p>image here</p>
</td>
<td>
{mv.original_title}
<p>{mv.overview}</p>
</td>
</tr>
})}
</tbody>
</table>
)}
export default class movie extends Component {
constructor(){
super()
this.state={
data: [],
}
}
componentWillMount(){
fetch("https://api.themoviedb.org/3/search/movie?
api_key=ab85c167dc8f5538f5b6e08f01923243&query=J")
.then((res) =>res.json())
.then((data) => this.setState({
data: data,
}))
}
render() {
return (
<div>
<p>hi i will show you movies</p>
{this.state.data.length !== 0 ?
<Showingmovies mov = {this.state.data}/>:null}
</div>
)
}
}

Answer 1

You need to add return in the map method as
function Showingmovies(props){
return(
<table>
<tbody>
{props.mov.results.map((mv) =>{
return (
<tr>
<td>
<p>image here</p>
</td>
<td>
{mv.original_title}
<p>{mv.overview}</p>
</td>
</tr>
)
})}
</tbody>
</table>
)}

Answer 2

Problem is return
Solution
Whenever you use map you must use return if you use `{} like
{props.mov.results &&
props.mov.results.map(mv => {
return <tr>
<td>
<p>image here</p>
</td>
<td>
{mv.original_title}
<p>{mv.overview}</p>
</td>
</tr>;
})}
and if you are not don't want to return then remove {} like
{props.mov.results && props.mov.results.map(mv =>
<tr>
<td>
<p>image here</p>
</td>
<td>
{mv.original_title}
<p>{mv.overview}</p>
</td>
</tr>)
}
codeSandbox