const months = {
1: 'Января',
2: 'Февраля',
3: 'Марта',
4: 'Апреля',
5: 'Мая',
6: 'Июня',
7: 'Июля',
8: 'Августа',
9: 'Сентября',
10: 'Октября',
11: 'Ноября',
12: 'Декабря',
};
function formatDate(date) {
const [dd, mm, yyyy] = date.split('.');
return `${dd} ${months[Number(mm)]} ${yyyy}`;
}
console.log(formatDate('01.06.2020'));
root = true
[*]
charset = utf-8
indent_size = 4
indent_style = space
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.js,*.jsx]
indent_size = 2
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>
);
};
Пишут, что connect более производительная штука, а useSelector чаще будет рендирить, так ли это?