Sobes.tech
Intern — Middle

Updating the name on button click in a React component

livecode

Task condition

In this React component App, you need to add a new state representing an object with a name field, initially containing the string "Anton". You should also place a button, which when clicked, changes the value of the name field to "Alexander". The component already has a count state and click handlers using useCallback and useEffect. Your task is to integrate the new state and the name-changing logic without disrupting the existing code.

import { useCallback, useEffect, useMemo, useState } from "react";

export function App() {
  const [count, setCount] = useState(0);

  const btnClick = () => {
    setCount(count + 1);
  };

  const handleBtnClick = useCallback(() => {
    btnClick();
  }, []);

  // function btnClick2() {
  //   const bigArr = Array(1000000).fill("user");
  //   bigArr.forEach((el, i, arr) => {
  //     arr[i] = arr[i] + i;
  //   });
  //   setCount(count + 1);
  // }

  return (
    <div>
      <button onClick={handleBtnClick}>{count}</button>
      {/* <button onClick={btnClick2}>Compute Heavy</button> */}
      <div />
      <input type="text" />
    </div>
  );
}

And in Kazakh (kk):

Бұл React компоненті `App`-те жаңа күй қосу керек, ол `name` өрісі бар объектті көрсетеді және бастапқыда "Антон" деген жолды қамтиды. Сондай-ақ, батырма орналастыру керек, оны басқанда `name` өрісінің мәні "Александр"-ға өзгеруі керек. Компонентте қазір `count` күйі және `useCallback` мен `useEffect` қолданатын батырма өңдеушілері бар. Сіздің міндетіңіз — жаңа күй мен есім өзгерту логикасын енгізу, бар кодты бұзбай.

```javascript
import { useCallback, useEffect, useMemo, useState } from "react";

export function App() {
  const [count, setCount] = useState(0);

  const btnClick = () => {
    setCount(count + 1);
  };

  const handleBtnClick = useCallback(() => {
    btnClick();
  }, []);

  // function btnClick2() {
  //   const bigArr = Array(1000000).fill("user");
  //   bigArr.forEach((el, i, arr) => {
  //     arr[i] = arr[i] + i;
  //   });
  //   setCount(count + 1);
  // }

  return (
    <div>
      <button onClick={handleBtnClick}>{count}</button>
      {/* <button onClick={btnClick2}>Heavy Computation</button> */}
      <div />
      <input type="text" />
    </div>
  );
}