CODEWITHSUNDEEP
reactjsprimereact
David_roman
David_roman

Reputation: 75

change from Classcomponent to functional component

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

Upvotes: 0

Views: 170

Answers (3)

Lucy Potter
Lucy Potter

Reputation: 300

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

Upvotes: 1

Hajan
Hajan

Reputation: 75

Try to use this component in VS code

Glean

Upvotes: 1

Mithun Shreevatsa
Mithun Shreevatsa

Reputation: 3599

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

Upvotes: 1

Related Questions