<React.StrictMode> метод жизненного цикла ComponentDidMount отрабатывает дважды. Документация.
.map - Вы ничего не возвращаете.{options.map(option => {
return (
<option key={option.value} value={option.value}>
{option.name}
</option>
);
})}{options.map(option => (
<option key={option.value} value={option.value}>
{option.name}
</option>
))}import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';
const users = [
{
id: 1,
firstName: 'John',
lastName: 'Doe',
age: 27
},
{
id: 2,
firstName: 'Emily',
lastName: 'Green',
age: 29
}
];
const Home = () => {
return (
<ul>
{users.map(user => (
<li key={user.id}>
<Link to={`/${user.id}`}>{user.firstName} {user.lastName}</Link>
</li>
))}
</ul>
);
};
const User = () => {
const params = useParams();
const id = parseInt(params.id);
const user = users.find((entry) => entry.id === id);
if (user === undefined) {
return <p>User not found</p>;
}
return (
<>
<ul>
<li><storng>Firstname</storng>: {user.firstName}</li>
<li><storng>Lastname</storng>: {user.lastName}</li>
<li><storng>Age</storng>: {user.age}</li>
</ul>
<Link to="/">Go back</Link>
</>
);
};
const root = createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<Routes>
<Route index element={<Home />} />
<Route path=":id" element={<User />} />
</Routes>
</BrowserRouter>
);interface ComponentProps<V, D> {
value: V;
data: D;
}
const Component = <V, D>({ value, data }: ComponentProps<V, D>) => <></>;jsconfig.json алиасы - так не будет работать. Либо переопределяйте алиасы в webpack, а если это CRA, сделать не так просто (вроде есть некоторые утилиты, работающие поверх CRA). Вариант второй - исправить везде импорты.
<Routes>
<Route path="/" element={<Coins coins={coins} />} />
<Route path="/coin">
<Route index element={<Coin />} />
<Route path=":coinId" element={<Coin />} />
</Route>
</Routes>useEffect без массива значений, за которым надо следить (dependencies), будет срабатывать при каждом рендере. Изменение состояния вызывает новый рендер, который в свою очередь вызывает useEffect.useEffect(() => {
const intervalId = setInterval(() => {
console.log("ticking");
setNumber((prevCount) => prevCount + 1);
}, 1000);
return () => clearInterval(intervalId);
}, []);MovieInfo[] (все равно что Arrray<MovieInfo>), а получаете один объект.React.useState<MovieInfo | null>(null);<h1>{currentMovieDetail?.id}</h1>
const newTasks = [...tasks, taskNew];
setTask(newTasks);
setActiveTasks(newTasks)