CODEWITHSUNDEEP
javascriptreactjs
유용상
유용상

Reputation: 33

How to convert a React Class Component to a Function Component this project

import React, { Component } from 'react';
import { Route } from 'react-router-dom';

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import * as baseActions from '../../redux/modules/base';
import { AuthWrapper } from '../../components/Auth';
import { Login, Register } from '../../containers/Auth';

class Auth extends Component {
  // 페이지에 진입 할 때 헤더를 비활성화
  componentWillMount() {
    this.props.BaseActions.setHeaderVisibility(false);
  }

  // 페이지에서 벗어 날 때 다시 활성화
  componentWillUnmount() {
    this.props.BaseActions.setHeaderVisibility(true);
  }

  render() {
    return (
      <AuthWrapper>
        <Route path="/auth/login" component={Login} />
        <Route path="/auth/register" component={Register} />
      </AuthWrapper>
    );
  }
}

export default connect(
  (state) => ({

  }),
  (dispatch) => ({
    BaseActions: bindActionCreators(baseActions, dispatch)
  })
)(Auth);

i want convert this file to function component i tried something like this

const Auth = (BaseActions) => {
  useEffect(() => {
    BaseActions.setHeaderVisibility(false);
    return BaseActions.setHeaderVisibility(true);
  })

but an error occurred enter image description here

i don't know this.props so i want how to convert this class component

Upvotes: 2

Views: 80

Answers (3)

Divya
Divya

Reputation: 131

BaseActions.setHeaderVisibility is not your function because you have not destructured your prop data. Right now BaseAction is being treated as a prop for this component.

Ways you can eliminate this problem is mentioned in below snippets:

const Auth=(props)=>{
const { BaseActions, ...rest} = props;
useEffect(() => {
BaseActions.setHeaderVisibility(false);
return () => BaseActions.setHeaderVisibility(true);
}, []);

OR

const Auth=({ BaseActions, ...rest})=>{
useEffect(() => {
BaseActions.setHeaderVisibility(false);
return () => BaseActions.setHeaderVisibility(true);
}, []);

OR

Here dot dot stands for the names of your props that is being defined in the connect wrapper.

const Auth=({ BaseActions, ... , .... , ... , otherProps})=>{
useEffect(() => {
BaseActions.setHeaderVisibility(false);
return () => BaseActions.setHeaderVisibility(true);
}, []);

Upvotes: 3

Drew Reese
Drew Reese

Reputation: 203418

You are not accessing the props correctly, BaseActions is a prop, not the entire props object. You can destructure BaseActions from props though.

Don't forget to include an empty dependency array ([]) so the useEffect hook is called only on component mount and unmount.

const Auth = ({ BaseActions }) => {
  useEffect(() => {
    BaseActions.setHeaderVisibility(false);
    return BaseActions.setHeaderVisibility(true);
  }, []);

  ...

Upvotes: 1

A D
A D

Reputation: 466

You need to de-structure the props parameters like this -

const Auth = ({BaseActions}) => {
  useEffect(() => {
    BaseActions.setHeaderVisibility(false);
    return BaseActions.setHeaderVisibility(true);
  });

React function takes props as a parameter. This props has a property BaseActions. So you use ES6 destructuring and get only BaseActions. If you have more than 1 props, then you can use it like below -

const Auth = ({ BaseActions, props2, props3 }) => {
  useEffect(() => {
    BaseActions.setHeaderVisibility(false);
    return BaseActions.setHeaderVisibility(true);
  });

Upvotes: 2

Related Questions