const rootElement = document.getElementById("root");
render(
<BrowserRouter>
<Routes>
<Route path="/" element={<App />}>
<Route path="expenses" element={<Expenses />} />
<Route path="invoices" element={<Invoices />} />
</Route>
</Routes>
</BrowserRouter>,
rootElement
);
import { Outlet, Link } from "react-router-dom";
export default function App() {
return (
<div>
<h1>Bookkeeper</h1>
<nav
style={{
borderBottom: "solid 1px",
paddingBottom: "1rem"
}}
>
<Link to="/invoices">Invoices</Link> |{" "}
<Link to="/expenses">Expenses</Link>
</nav>
<Outlet />
</div>
);
}
eslint-plugin-react-hooks
не знает, что данная функция не меняет свой референс.{
"rules": {
// ...
"react-hooks/exhaustive-deps": ["warn", {
"additionalHooks": "useDispatch|useOtherHookWhichWillDefinitelyNotChange"
}]
}
}
class Rate extends React.Component {
constructor(props) {
super(props);
this.state = {
date: '',
currencyRat: {},
}
this.currency = ['USD', 'RUB', 'CAD'];
}
componentDidMount() {
this.getRate(); // не в конструкторе надо вызывать, а в componentDidMount
}
getRate() {
fetch('https://api.exchangeratesapi.io/latest')
.then(data => {
return data.json(); // забыли вызвать функцию
})
.then(data => {
console.log(data)
this.setState({ date: data.date })
})
}
import React from "react";
import "./TodoItem.css";
const Mode = {
VIEW: "VIEW",
EDIT: "EDIT"
};
export const TodoItem = ({ index, item, updateItem, removeItem }) => {
const [mode, setMode] = React.useState(Mode.VIEW);
const [input, setInput] = React.useState(item.text);
const inputRef = React.useRef();
React.useEffect(() => {
if (mode === Mode.EDIT) {
inputRef.current.focus();
}
}, [mode]);
const handleInput = event => {
setInput(event.target.value);
};
const saveItem = () => {
updateItem(index, input);
setMode(Mode.VIEW);
};
const handleToggleMode = () => {
setMode(prevMode => (prevMode === Mode.VIEW ? Mode.EDIT : Mode.VIEW));
};
const handleRemove = () => {
removeItem(index);
};
return (
<div className="todo-item">
<div className="todo-item__data">
{mode === Mode.VIEW && (
<div className="todo-item__value">{item.text}</div>
)}
{mode === Mode.EDIT && (
<div className="todo-item__form">
<input
type="text"
value={input}
onChange={handleInput}
ref={inputRef}
/>
<button type="button" onClick={saveItem}>
Save
</button>
</div>
)}
</div>
<div className="todo-item__meta">
<div className="todo-item__controls">
<button type="button" onClick={handleToggleMode}>
Edit
</button>
<button type="button" onClick={handleRemove}>
Remove
</button>
</div>
<div className="todo-item__time">{item.time.toLocaleString()}</div>
</div>
</div>
);
};