CODEWITHSUNDEEP
reactjstypescriptstatic
vanegeek
vanegeek

Reputation: 713

How to turn this Component Class into a pure function Stateless Component (Typescript + React)

Hello I had this component and a container component class and it had some state. I realized that I do not need it to manage state anymore and I want to turn it into a sateless component so from "export class LeftNavigation extends React.Component {" to "export const LeftNavigation: React.StatelessComponent =props => {

import * as React from "react";
import { NavLink, Link } from 'react-router-dom';

export interface LeftNavigationProps {
    title: string;
    path: string;
}

export class LeftNavigationItem {
    title: string;
    path: string;

    constructor(title: string, path: string) {
        this.title = title;
        this.path = path;
    }
}

// 'LeftNavigationProps' describes the shape of props.
export class LeftNavigation extends React.Component<LeftNavigationProps, {}> {
    static items: Array<LeftNavigationItem> = [
        new LeftNavigationItem('On demand tests', '/ondemandtests'),
        new LeftNavigationItem('Fleet status',    '/fleetstatus'  )
    ];

    constructor(props: LeftNavigationProps) {
        super(props);
        this.state = { focused: 0 };
    }

    componentWillMount() {

    }

    render() {
        var self = this;

        return (
            <div className="sidebar-container">
                <div className="page-sidebar">
                    <div className="nav-menu-stack">
                        <Link className="active" to={this.props.path}>{this.props.title}</Link>
                        <div className='subnav-menu'> {
                            LeftNavigation.items.map(function(m, index) {
                                return <NavLink key={m.path} activeClassName="active" to={self.props.path + m.path}>{m.title}</NavLink>;
                            })
                        }
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

Upvotes: 2

Views: 579

Answers (1)

BenWurth
BenWurth

Reputation: 800

Give this a shot:

import * as React from "react";
import { NavLink, Link } from 'react-router-dom';

export interface LeftNavigationProps {
    title: string;
    path: string;
}

export class LeftNavigationItem {
    title: string;
    path: string;

    constructor(title: string, path: string) {
        this.title = title;
        this.path = path;
    }
}

const LeftNavigation = (props: LeftNavigationProps) => {
    const items: Array<LeftNavigationItem> = [
        new LeftNavigationItem('On demand tests', '/ondemandtests'),
        new LeftNavigationItem('Fleet status', '/fleetstatus')
    ];
    return (
        <div className="sidebar-container">
            <div className="page-sidebar">
                <div className="nav-menu-stack">
                    <Link className="active" to={props.path}>{props.title}</Link>
                    <div className='subnav-menu'> {
                        items.map(function (m, index) {
                            return <NavLink key={m.path} activeClassName="active"
                                            to={props.path + m.path}>{m.title}</NavLink>;
                        })
                    }
                    </div>
                </div>
            </div>
        </div>
    );
};

export default LeftNavigation;

Notice that it's just a regular old function and that the props are passed in directly. No this keyword. Also, items is declared inside the function itself before the return statement.

Upvotes: 2

Related Questions