Reactjs convert class components to functional components

Question

I am new in react. I want to use form stepper in my project. I found one library but in that library using class components. I am little confuse convert class components to

Answer 1

Check the code below:

import React, {useState} from 'react'
import {connect} from 'react-redux'
import { Link } from 'react-router-dom'
import PropTypes from 'prop-types'
import Stepper from 'react-stepper-horizontal'
import { Card } from 'reactstrap'

import GeneralForm from './../../components/con/GeneralForm'
import PersonalDetailsForm from './../../components/con/PersonalDetailsForm'
import NomineeDetailsForm from './../../components/con/NomineeDetailsForm'

const ConCreate = (props) => {

  const initStepsValue = [
    {title: 'Visitor Details'},
    {title: 'Personal Details'},
    {title: 'Nominee Details'}
  ]

  const [page, setPage] = useState(0)
  const [steps, setSteps] = useState(initStepValue)

  const nextPage = () => setPage(page + 1) 
  const prevPage = () => previousPage(page - 1)


  return (
    
       
         {page === 0 && }
         {page === 1 && (
           
         )}
         {page === 2 && (
           
         )}
     
  )
}

ConCreate.propTypes = {}

const mapDispatchToProps = {}

const mapStateToProps = state => ({})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ConCreate)