Pass this component to arrow function [React]

Question

I'm trying to pass this component created with 'class' to 'arrow functions' but I'm new in React and JavaScript so I still can't get it, could someone help me?

const cookies = new Cookies();
 class Index extends React.Component {

  constructor(props) {
   super(props);
   this.state = {
    token: cookies.get('token') || null
   }
  }
 }

Answer 1

There are 2 types of components in React 1.Class Based Components and 2. Functional Components you can convert a class based component to functional component using arrow function

you can write the above class based component into functional component as follows

import React,{useState} from 'react'

const index=()=>{
const [cookies, setCookies] = useState(cookies.get('token') || null);
return(
    <div>
        
    </div>
  )
}

Answer 2

After importing and using the useState hook you can do one of these:

function Index(props) {
    const [cookies, setCookies] = useState(cookies.get('token') || null);
    // do stuff and return something
}

or

const Index = (props) => {
    const [cookies, setCookies] = useState(cookies.get('token') || null);
    // do stuff and return something
}