REACT Component to REACT Function

Question

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 
}

Basically, move your code inside componentDidMount to useEffect(s), convert your state variables to useState and get rid of the render() function. — Sinan Yaman
– Sinan Yaman, Commented Aug 9, 2021 at 12:22
Yes i tried something like this but it runs in problems i couldn´t really resolve, maybe you can show me the correct implementation for this example, so there would be something i can orientate — davidbo92
– davidbo92, Commented Aug 9, 2021 at 12:28
Show what you have tried, and I will be more than happy to point out the mistakes. — Sinan Yaman
– Sinan Yaman, Commented Aug 9, 2021 at 12:29
Class Components and Function Components are both components — Quentin
– Quentin, Commented Aug 9, 2021 at 12:44

Evren · Accepted Answer · 2021-08-09 12:41:24Z

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>) }
          );
    }

Collectives™ on Stack Overflow

REACT Component to REACT Function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related