Получение значений состояния в простом компоненте - Class VS Functional (Класс работает, функционал не работает). Почему?

Question

Для получения значений через state я сделал простой пример. У меня есть 2 простых компонента - 1) на основе классов 2) на основе функций.

Я новичок в React, поэтому опробовал оба варианта. Для класса это работает, для Функционального это не так. Пожалуйста, помогите.

Случай I: Класс (рабочий)

import React, { Component } from 'react';

class HomeClass extends Component {

  state = {
    name: "Jack Rogers",
    age: 25,
    city: "New York"
  }

  render() {
    return (
      <div>
        <p>{this.state.name + "/" +  this.state.age + "/" +  this.state.city }</p>
      </div>
    )
  }
}

export default HomeClass;

Случай II: Функциональный (х не работает)

import React, { useState, useEffect } from 'react';

const HomeFunctional = () => {

  [details, setDetails] = useState({name: "Jack Rogers", age: 29, city: "New York"})

  return (
    <div>
      <p>{this.details.name + "/" + this.details.age + "/" + this.details.city}</p>
    </div>
  )
}

export default HomeFunctional;

Ошибка:

Answer 1

Вам нужно сделать с const создание экземпляра и без this.

Попробуйте следующее:

const HomeFunctional = () => {
  const [details, setDetails] = useState({name: "Jack Rogers", age: 29, city: "New York"})

  return (
    <div>
      <p>{details.name + "/" + details.age + "/" + details.city}</p>
    </div>
  )
}

Надеюсь, это поможет!