Converting functional component to class based component

Question

I need to convert a functional component to a class based component. I am fairly new to React but I have tried to convert the component. I get the error - ReferenceError: Cant find variable: Props

My question is, where do I add props which was present in the class based component to make the conversion work ?

The class based component which is a modal with a form triggered from a parent component,this works well. The form uses state variables which dont work in a class based component so I need to convert the current functional component to a class based component. I'm using version 16.6.3 of React because other packages do not work with newer versions of React-Native so I cant use hooks with this version.

Functional component

const ShowModal = props => (
  <Modal
    visible={props.display}
    animationType="slide"
    onRequestClose={() => console.log("closed")}
  >
   ...Other stuff in here. 
 </Modal>
);
export default ShowModal;

Class based component

export default class ShowModal extends Component {
  state = {     
  };

  render() {
    return (
      ...Other stuff in here 
    );
  }
}

I get the error - ReferenceError: Cant find variable: Props

The simplest way to do it is to do render() { const props = this.props;return(... Or use an external state manager like redux and use react-redux connect to create containers that will create props from redux state — HMR
– HMR, Commented Aug 28, 2019 at 12:26

Dupocas · Accepted Answer · 2019-08-28 12:01:05Z

3

In class based components props is exposed in the main scope of the class. You should read it using this keyword

class Component extends React.Component{
    render(){return this.props.value}
}

answered Aug 28, 2019 at 12:01

Dupocas

21.5k7 gold badges44 silver badges59 bronze badges

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

Comments

Wijitha · Accepted Answer · 2019-08-28 12:10:30Z

0

I presume you want to use State, as the reason for moving to a Class component. Instead I suggest to use React Hooks which is the newest and elegant approach.

const ShowModal = props => (

const [state, setState] = React.useState({});

  <Modal
    visible={props.display}
    animationType="slide"
    onRequestClose={() => console.log("closed")}
  >
   ...Other stuff in here. 
 </Modal>
);

React Hooks: https://medium.com/frontmen/react-hooks-why-and-how-e4d2a5f0347

answered Aug 28, 2019 at 12:10

Wijitha

1,3993 gold badges14 silver badges26 bronze badges

2 Comments

Charl Over a year ago

Hooks arent supported by the React version Im using, I would use Hooks but cant upgrade because of issues with React-Native-Maps and background-geoloaction packages.

Wijitha Over a year ago

Ahh, make sense.

Collectives™ on Stack Overflow

Converting functional component to class based component

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related