CODEWITHSUNDEEP
reactjs
vaibnak
vaibnak

Reputation: 467

Elements not rendering in react

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>
 )
 }
 }

Upvotes: 0

Views: 69

Answers (2)

Revansiddh
Revansiddh

Reputation: 3062

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

Upvotes: 2

Harikrishnan
Harikrishnan

Reputation: 1097

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>
 )}

Upvotes: 2

Related Questions