Назад к задачам
Junior — Middle+
53

Обнаружить и исправить баги в React‑компоненте

Получайте помощь с лайвкодингом в реальном времени с Sobes Copilot
Условие задачи

Найдите и устраните ошибки в приведённом ниже фрагменте кода. Обратите внимание на синтаксис JSX, корректность использования хуков и правильность разметки.

import React, { useState } from "react";

const initList = () => {
    return Array.from({ length: 200 }, (_el, index) => ({ value: Math.random(),
    label: `row ${index + 1}` I
    }));
}

export default function App() {
    const [list] = useState(initList());
}

const handleUpdate = () => {
    list[0].value = Math.random();
};

return (
    <div>
    <h1>List App</h1>
    <Button onClick={handleUpdate}>Update "row 1"
</Button>
    {
    list.map(({ label, value }) => (
    <Row label={label} value={value} />
    );
    }
</div>
};

function Button(props) {
    const { children, onClick } = props;

    return <button onClick={onClick}>{children}</button>
}

function Row(props) {
    const {
    label, value
    } = props;

    return (
    <div style={{ marginTop: '8px' }}>
    <span style={{ marginRight: "20px" }}>{label}:</span>
    <span>{{value}</span>
    </div>
});