Назад к задачамПолучайте помощь с лайвкодингом в реальном времени с Sobes Copilot
Junior — Middle+
53
Обнаружить и исправить баги в React‑компоненте
Условие задачи
Найдите и устраните ошибки в приведённом ниже фрагменте кода. Обратите внимание на синтаксис 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>
});