How can I use directly function in React?

Question

In this code, I would like to show data with directly using function _renderMovies not like

{movies? this._renderMovies(): 'Loading!' }

cuz I don't want to show Loadings

Do you guys have an idea of how can I use directly function _renderMovies?

My code :

import React, { Component } from 'react';
import L_MovieList from './L_MovieList';
import L_Ranking from './L_Ranking';
import './L_BoxOffice.css';
class L_BoxOffice extends Component {
  state ={

  }
  constructor(props) {
      super(props);
      this._renderMovies = this._renderMovies.bind(this);
  }
componentDidMount(){
    this._getMovies();
}
_renderMovies=()=>{
  const movies= this.state.movies.map((movie)=>{
    console.log(movie)
      return  <L_Ranking
      title={movie.title_english}
      key={movie.id}
      genres={movie.genres}
      />
  })
  return movies
}
_getMovies = async()=>{
 const movies = await this._callApi() 
 this.setState({
   //movies : movies
   movies 
 })
}
  _callApi=()=>{
    return   fetch('https://yts.am/api/v2/list_movies.json?sort_by=download_count')
    .then(potato=> potato.json()) 
    .then(json=> json.data.movies)
    .catch(err=>console.log(err))
    }
  render() {
      const{movies}=this.state;
    return (
      <div>

      <div className={movies ? "L_BoxOffice" : "L_BoxOffice--loading"}>
      <div className="L_Ranking_title">RANKING</div>
{movies? this._renderMovies(): 'Loading!' }
      </div>
        Box office page
        <L_MovieList/>
      </div>
    );
  }
}

export default L_BoxOffice;

Jordan Enev · Accepted Answer · 2018-06-15 09:21:32Z

1

First of all set movies to be an empty array by default in the state.

constructor(props) {
  super(props);
  this.state = { movies: [] }
  this._renderMovies = this._renderMovies.bind(this);
}

After that just render the movies:

<div className="L_Ranking_title">RANKING</div>
  {this._renderMovies()}
</div>

Having an empty array as a default value, will remove the ternary operator usage and .map will always work, because by default the movies will be iterable.

answered Jun 15, 2018 at 9:21

Jordan Enev

18.8k3 gold badges45 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cat_lover Over a year ago

Thanks a lot ! you helped me! Can I ask one more question? after fixed it, the data comes out late..around 2sec. I want to show date right when open the page. Is that because I put the function in componentDidMount()?.. why _renderMovies returns so late?

Jordan Enev Over a year ago

In short: it's fine that you call it in componentDidMount(). It won't have too improvement if you call it in the constructor or any other lifecycle method. Please read this article. It depends to your app architecture. You can create a HOC that will be responsible for data fetching, but keep in mind that there will be always a resource loading time, because of the API server response time.

Alex Antonov · Accepted Answer · 2018-06-15 09:18:41Z

1

Replace {movies? this._renderMovies(): 'Loading!' } with _this.renderMovies()

answered Jun 15, 2018 at 9:18

Alex Antonov

15.4k10 gold badges75 silver badges157 bronze badges

Comments

Jigar · Accepted Answer · 2018-06-15 09:24:22Z

0

use arrow function

like you can directly call any function like this

_renderMovies = ()=>{
 if(true){

  }else{
   return 'loading...' //just an example
   }
}

render(){
  {this._renderMovies()}
}

answered Jun 15, 2018 at 9:24

Jigar

1,3749 silver badges20 bronze badges

Collectives™ on Stack Overflow

How can I use directly function in React?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related