Convert React Class to a Functional Component

Question

On my older repository, I have used Class Components with the following CruiseListHeader component code, as an example (used for showing Cruise Buttons).

    import React from 'react';
    import {getCruiseLines} from '../api/api'
    import ListofShips from './ListofShips'
    
    
    class CruiseListHeader extends React.Component {
        constructor(props)  {
            super(props)
    
            //setting intial state for Cruise Headings and initialize cruiseHeaders as an empty array
            this.state = {
                cruiseHeaders: []
            } 
            
            //binding methods for setting up Cruise Line Headings
            this.setUpCruiseLines = this.setUpCruiseLines.bind(this)
        }  
    
        componentDidMount() {
            console.log('cdm')
            this.setUpCruiseLines()
        }
    
        setUpCruiseLines()  {
            console.log('getcruiselines')
            getCruiseLines()
                .then(res   =>  {
    
                    this.setState({
                        cruiseHeaders: res
                    })
                })
        }
         
        render()    {
            return  (

            

                {/* There will be Headings for all the Cruise Lines. */}
                {/* Map the Cruiseline Headings for each Ship to display them on the page. I want to map ship, because I need each ship displayed in a List, when Cruise Line Heading is clicked. */}

            

                {this.state.cruiseHeaders.map (ship =>  {
                
                    return (

                    

                        {/* ListofShips component needs cruise_line, because when user clicks on Cruise Line Heading button,
                            we need to fetch ships that belongs to that particular cruiseline. */}
                        {/* We need to render multiple ListofShips components, with one for each cruiseline */}
                        

                    
                    )

                })}

                  

             
        )
    }
} 

export default CruiseListHeader

Please note that this is all related to a Cruise Lines Page shown below, that has a main CruiseLines.jsx component with the CruiselistHeader.jsx mentioned above imported into it.

Cruise Buttons on Cruise lines Page

Now I want to start the change by converting this React Class Component into a Functional one.

This is what I have for my CruiseListHeader as a Functional Component, so far.

Please note that ListofShips is now called ShipsList in this new repository.

import React, { useEffect, useState} from 'react'
import {getCruiseLines } from '../api/api'
import ShipsList from './ShipsList'

function CruiseListHeader() {

    // Declare cruiseHeaders State variable 
    const [cruiseHeaders] = useState({
        
    })

    useEffect (() =>    {

    // Note: This was the original ComponentDidMount that took Binding this.setUpCruiseLines()
    // Now it is coming from the CruiseListHeader.js useEffect to the DOM    
    }
    )
    

    return  (
        <>
            
            
                            
            
            
        
    )
}

export default CruiseListHeader

What I am wanting to understand, is how does the Functional Component handle the state from my api, the binding and the mapping that I was previously using in my Class Component ?

If anyone has any ideas of how I can handle this, then that would be of great valuable help thanks.

user_328193 · Answer

You're ignoring the setter for the state, your useState line should be:

const [cruiseHeaders, setCruiseHeaders] = useState({});

Then you'd use that setCruiseHeaders function to set the state:

useEffect (() => {
  getCruiseLines()
    .then(res => {
      setCruiseHeaders({
        cruiseHeaders: res
      })
    });
}, []); // Make sure to also pass an array here, or you'll be triggering this effect on every render

As an aside, you probably meant to initialize your state value to an array instead of an object:

const [cruiseHeaders, setCruiseHeaders] = useState([]);

Since the "cruise headers" data in your original code was an array.

user_11084543 · Answer

import React, { useEffect, useState} from 'react'
import {getCruiseLines } from '../api/api'
import ShipsList from './ShipsList'

function CruiseListHeader() {

    // Declare cruiseHeaders variable and set it's array using useState 
    const [cruiseHeaders, setCruiseHeaders] = useState([]);    
    
    // Note: This was the original ComponentDidMount that took Binding this.setUpCruiseLines()
    // Now it is coming from CruiseListHeader.jsx useEffect to the DOM    

    useEffect (() => {
        getCruiseLines()
          .then(res => {
            setCruiseHeaders({
              cruiseHeaders: res
            })
          });
      }, []); // Make sure to also pass an array here, or you'll be triggering this effect on every render

    return  (
        <>

        {/*  I don't think I need this because I am using Tailwind CSS*/}
        {/* When I use Sass in my next final repo I may not need a div either */}

            {cruiseHeaders.map (ship => {

                // return  ( Do not need return here, I think

                    

                        {/* ListofShips component needs cruise_line, because when user clicks on 
                        Cruise Line Heading button, we need to fetch ships that belongs to that particular 
                        cruiseline. */}
                        {/* We need to render multiple ShipsList components, with one for each cruiseline */}
                        

                        {/*   I think I don't I need this closing tag*/}
                    

                // ) I think, I do not need return closing bracket here
            })}
        {/*  I think, I do not need closing div from cruiseContainer here*/}

        
    )
}

export default CruiseListHeader

Convert React Class to a Functional Component

2 Answers