convert class base component in react into hooks

Question

I'm new to react hooks, and I'm having a hard time to convert this class, into react hooks with ES6 syntax. could somone please help me. here is my coude...

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

import { fetchMovie, setLoading } from '../../actions/searchActions';

import Spinner from '../layout/Spinner';

export class Movie extends Component {
  componentDidMount() {
    this.props.fetchMovie(this.props.match.params.id);
    this.props.setLoading();
  }
  render() {
    const { loading, movie } = this.props;

    let movieInfo = (
      <div className="container">
       jsx......
 </div>
    );

    let content = loading ? <Spinner /> : movieInfo;
    return <div>{content}</div>;
  }
}

const mapStateToProps = state => ({
  loading: state.movies.loading,
  movie: state.movies.movie
});

export default connect(
  mapStateToProps,
  { fetchMovie, setLoading }
)(Movie);

Harsha Venkataramu · Accepted Answer · 2020-08-12 16:29:10Z

3

Some of the most commonly used hooks are useState, useEffect. useState is similar to setState in certain ways, with one of the differences being that you don't have the callback functionality with useState. You could use a useEffect to achieve something similar. useEffect can work as componentDidMount, componentDidUpdate and componentWillUnmount. If you pass an empty set of dependancies, [](like in the following example), it behaves as componentDidMount. If you want a particular functionality to be triggered based on certain conditions such as a state being updated etc, you can pass that as a dependancy. Then, the useEffect behaves as componentDidUpdate. useEffect accepts a third argument, as a callback function. This is triggered when the component is being unmounted, thereby adding the componentWillUnmount behaviour.

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

import { fetchMovie, setLoading } from '../../actions/searchActions';

import Spinner from '../layout/Spinner';

const Movie = () => {
  useEffect(() => {
    props.fetchMovie(props.match.params.id);
    props.setLoading();
  }, [])
  const { loading, movie } = props;

    let movieInfo = (
      <div className="container">
       jsx......
      </div>
    );

  let content = loading ? <Spinner /> : movieInfo;
  return <div>{content}</div>;
}

const mapStateToProps = state => ({
  loading: state.movies.loading,
  movie: state.movies.movie
});

export default connect(
  mapStateToProps,
  { fetchMovie, setLoading }
)(Movie);

edited Aug 12, 2020 at 16:29

answered Aug 12, 2020 at 16:23

Harsha Venkataramu

2,9121 gold badge37 silver badges62 bronze badges

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

2 Comments

Rodrigo Amaral Over a year ago

You forgot to remove the this.props and to pass props as the parameter.

Harsha Venkataramu Over a year ago

@RodrigoAmaral: Every time :/

Boykov · Accepted Answer · 2020-08-12 16:25:13Z

You can rewrite to hooks like that.

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Link } from 'react-router-dom';

import { fetchMovie, setLoading } from '../../actions/searchActions';

import Spinner from '../layout/Spinner';

export const Movie = ({ match}) => {
  const dispatch = useDispatch();
  const movie = useSelector(state => state.movies.movie);
  const loading = useSelector(state => state.movies.loading);
  useEffect(() => {
        dispatch(fetchMovie(match.params.id));
        dispatch(setLoading());
     }, []);

  return (
    <div>
      {
        loading 
         ? <Spinner /> 
         : <div className="container">
            jsx......
          </div>
      }
    </div>
  )
}

useEffect with empty array as params works like componentDidMount. And i changed connect to useSelector and useDispatch

Collectives™ on Stack Overflow

convert class base component in react into hooks

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related