использование хуков для установки активного className

Question

Я пытаюсь преобразовать некоторые из моих компонентов класса в функциональные компоненты. но мой активный класс "toogle" не работает с хуками, пожалуйста, что я делаю не так, это мой скрипт.

import React from "react";
import "./styles.css";

export default class ActiveState extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeIndex: 0
    };
  }

  handleOnClick = index => {
    this.setState({ activeIndex: index });
  };

  render() {
    const boxs = [0, 1, 2, 3];
    const box = boxs.map((el, index) => {
      return (
        <button
          key={index}
          onClick={this.handleOnClick.bind(this, index, this.props)}
          className = {this.state.activeIndex === index ? "active" : "unactive"}
        >
          {el}
        </button>
      );
    });
    return <div className="App">{box}</div>;
  }
}

и это то, что я пытался использовать хуки, но не работает:

import React, { useState } from "react";
import "./styles.css";

export default function ActiveHooks() {
  const [activeIndex, setActiveIndex] = useState(0);

  const handleOnClick = index => {
    setActiveIndex({ index });
  };

  const boxs = [0, 1, 2, 3];
  const box = boxs.map((el, index) => {
    return (
      <button key={index} onClick={handleOnClick} className= {activeIndex === index ? "active" : "unactive"}>
        {el}
      </button>
    );
  });
  return <div className="App">{box}</div>;
}

спасибо заранее.

Answer 1

Попробуйте это:

function App() {
  const [activeIndex, setActiveIndex] = React.useState(0);

  const handleOnClick = index => {
    setActiveIndex(index); // remove the curly braces
  };

  const boxs = [0, 1, 2, 3];
  const box = boxs.map((el, index) => {
    return (
      <button
        key={index}
        onClick={() => handleOnClick(index)} // pass the index
        className={activeIndex === index ? "active" : "unactive"}
      >
        {el}
      </button>
    );
  });
  return <div className="App">{box}</div>;
}

ReactDOM.render( <App /> , document.getElementById('root'))

.active {
  background-color: green
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 2

  setActiveIndex(index);

Снять фигурные скобки. Вы изменили свой хук на {index: 1} вместо 1, если, например, вы нажали 1.