change from Classcomponent to functional component

Question

i have a little question, i having use PrimeReact to develop my stuff but sometimes is quite annoying change from classcomponent to functional component, so i want to change this component to funtional, someone can help me?

import React, { Component, useState } from 'react';
import { OverlayPanel } from 'primereact/overlaypanel';
import { Button } from 'primereact/button';


class Datas extends React.Component {
    render() {
        return (
            <div className='content-section implementation'>
                
                <Button
                    type='button'
                    icon='pi pi-search'
                    // label='Toggle'
                    onClick={e => this.op.toggle(e)}
                />
                <OverlayPanel ref={el => (this.op = el)}>
                <Button
                    type='button'
                    icon='pi pi-search'
                    // label='Toggle'
                    onClick={e => (e)}
                />
                
                </OverlayPanel>
            </div>
        );
    }
}


export default Datas

score 1 · Answer 1 · answered Nov 19 '20 at 13:28

import React, { Component, useState } from 'react';
import { OverlayPanel } from 'primereact/overlaypanel';
import { Button } from 'primereact/button';


 const Datas = () => {
    return (
        <div className='content-section implementation'>
            
            <Button
                type='button'
                icon='pi pi-search'
                // label='Toggle'
                onClick={e => this.op.toggle(e)}
            />
            <OverlayPanel ref={el => (this.op = el)}>
            <Button
                type='button'
                icon='pi pi-search'
                // label='Toggle'
                onClick={e => (e)}
            />
            
            </OverlayPanel>
        </div>
    );
}

 export default Datas

what is this.op in your code? Can you share the constructor properties? — Mithun Shreevatsa, Nov 19 '20 at 13:33

score 1 · Answer 2 · answered Nov 19 '20 at 13:29

1

Try to use this component in VS code

Glean

answered Nov 19 '20 at 13:29

Hajan

75
7

Mark Potter · Accepted Answer · 2020-11-19T13:37:37.197

For a component like this with only a render method translating to a functional component is simply this.

import React, { Component, useState } from 'react';
import { OverlayPanel } from 'primereact/overlaypanel';
import { Button } from 'primereact/button';


const Datas = () => {
    return (
        <div className='content-section implementation'>
            
            <Button
                type='button'
                icon='pi pi-search'
                // label='Toggle'
                onClick={e => op.toggle(e)}
            />
            <OverlayPanel ref={el => (op = el)}>
            <Button
                type='button'
                icon='pi pi-search'
                // label='Toggle'
                onClick={e => (e)}
            />
            
            </OverlayPanel>
        </div>
    );
}


export default Datas

'op' is not defined.. so in props we have to put ({op}) otherwise will not work anyway thanks!! — David_roman, Nov 19 '20 at 13:41

change from Classcomponent to functional component

3 Answers3