CODEWITHSUNDEEP
javascriptreactjsreact-hooks
davidbo92
davidbo92

Reputation: 1

REACT Component to REACT Function

I have to implement hooks in my Component, but as far as I know it is not possible using the hooks in a REACT.Component.. I am new at REACT and I don´t really have an Idea how I can convert my Component to a function correctly. Can someone show me how to convert the content from my Component to this function?

My Component:

import React from "react";
import { sessionId } from "../common/urlHandler";
import { Settings } from "../settings";
import { Constants } from "../common/constants.js";
import OrderHistoryService from "../services/orderHistory/orderHistoryService";
import OrderHistoryTable from "../orderHistory/orderHistoryTable";
import OrderHistoryPagination from "../orderHistory/orderHistoryPagination";
import OrderHistorySearchField from "../orderHistory/orderHistorySearchField";

export default class OrderHistoryPage extends React.Component {
  constructor(props) {
    super(props);

    const orderHistoryService = new OrderHistoryService(
      Settings.baseUrl,
      this.props.lang
    );

    this.state = {
      orderHistoryService: orderHistoryService,
      sessionId: sessionId(), 
      orderHistoryData: Constants.DummyOrderHistory,
    };
  }

  componentDidMount() {
    //fixMe: fetch-Data and set orderHistoryData
  }

  render() {
    if (this.state.orderHistoryData !== null) {
      return (
        <section className="section">
          <div><OrderHistorySearchField /></div>
          <div><OrderHistoryPagination /></div>
          <div><OrderHistoryTable orderHistoryData={this.state.orderHistoryData} /></div>
        </section>
      );
    }
  }
}

The function into I want to convert my Component:

export default function OrderHistoryPage () {
//fill with data from my Component 
}

Upvotes: 0

Views: 47

Answers (1)

Evren
Evren

Reputation: 4410

It should be like this basically you should use useState for states and useEffect for componentDidMount. Also you should remove things that does not exist in functional components like render and this.

    import React, {useState, useEffect} from "react";
    import { sessionId } from "../common/urlHandler";
    import { Settings } from "../settings";
    import { Constants } from "../common/constants.js";
    import OrderHistoryService from "../services/orderHistory/orderHistoryService";
    import OrderHistoryTable from "../orderHistory/orderHistoryTable";
    import OrderHistoryPagination from "../orderHistory/orderHistoryPagination";
    import OrderHistorySearchField from "../orderHistory/orderHistorySearchField";
    
    export default function OrderHistoryPage (props) { 
        const orderHistoryService = new OrderHistoryService(
          Settings.baseUrl,
          props.lang
        );
    
        const [orderHistoryService, setorderHistoryService] = useState(orderHistoryService);
    
        const [sessionId, setSessionId] = useState(sessionId());
    
        const [orderHistoryData, setOrderHistoryData] = useState(Constants.DummyOrderHistory); 
    
      useEffect(()=> {
          //fixMe: fetch-Data and set orderHistoryData
       }, []);  
          return (
    
          { (orderHistoryData !== null) &&
            (<section className="section">
              <div><OrderHistorySearchField /></div>
              <div><OrderHistoryPagination /></div>
              <div><OrderHistoryTable orderHistoryData={this.state.orderHistoryData} /></div>
            </section>) }
          );
    }

Upvotes: 1

Related Questions