Как написать хук useState если у состояния несколько свойств?

Question

[cosonicsq]

Есть классовый компонент который нужно переделать в функциональный а state переделать в хук useState. Но в state несколько свойств:

class App extends React.Component {

  state = {
    num: 0,
    text: 'no',
    textUpper: 'HELLO'
  }

  changeState = () => {
    this.setState({
      num: this.state.num + 1,
      text: "yes",
      textUpper: 'BYE'
    });
  }
  
  render() {
    return (
      <div>
          <button onClick={this.changeState}>like</button>
          {this.state.num}
          {this.state.text}
          {this.state.textUpper}
      </div>
    );
  }
}

Если было б только одно свойство, то я знаю как переделать:

const App = () => {
      const [num, setNum] = useState(0);

      const changeState = () => {
           setNum(num+1);
       }
  
    return (
      <div>
            <button onClick={changeState}>like</button>
           {num}
      </div>
    );
}

Но как переделать мой компонент когда несколько свойств как в моем случае не знаю. Подскажите пожалуйста.

Answer 1

[Тигран Абрамян]

Без разницы сколько переменных, используем useState бесконечное количество раз.

const [num, setNum] = useState(0);
const [text, setText] = useState('no');
const [textUpper, setТextUpper] = useState('HELLO');

const changeState = () => {
  setNum(num + 1);
  setText('yes');
  setТextUpper('BYE');
}

Либо можем создать обьект

const [data, setData] = useState({
  num: 0,
  text: 'no',
  textUpper: 'HELLO'
});

Либо можем использовать useReducer.

Comments

[cosonicsq]

спасибо)

[cosonicsq]

А если так написать:

const [data, setData] = useState({
  num: false,
  text: 'no',
  textUpper: 'HELLO'
});

То как изменять этот хук если создаю обьект? Тоесть что нужно написать в setData?

[real2210]

cosonicsq, setData(state=>{ return {...state, num: true} })