useEffect(() => {
setData(props.items.map((elem) => { // setData
return elem.weight
}))
} , [data, props.items] }) // data?
Стала задача при клике на кнопку подробнее карточка товара открывалась в новом окне браузера.
<a href="/item/item_name" target="_blank">Go to item</a>
<Route path='/item/:item_name' exact render={props => <ItemPage {...props} />} />
useEffect(() => {
setInterval(() => {
console.log(count); // всегда будет 0
setCount(prev => prev + 1); // prev будет актуальным
}, 100);
}, []);
.first:hover::before{
animation: eye 3s ease-in-out infinite;
}
scripts: {
......
"dev": "concurrently \"npm run start\" \"npm run api\""
}
Показывает анимацию удаления именно последнего элемента
{boxes.map((item, index) => (
<Box key={index} item={item} onDelete={onDelete} />
))}
componentDidMount() { // "При загрузке страницы запускается функция" это здесь
if (something) {
this.setState({ something: 'else' })
}
}
<Droppable droppableId="droppable2" type="LIST">
....
onDragEnd(result) {
....
console.log(result.destination.droppableId, result);
if(result.destination.droppableId === 'droppable2') {
// переместить в this.state.items2, или еще как-нибудь отметить позицию айтема
}
.....
}
type: A TypeId(string) that can be used to simply accept only the specified class of <Draggable />. <Draggable />s always inherit type from the <Droppable /> they are defined in.
For example, if you use the type PERSON then it will only allow <Draggable />s of type PERSON to be dropped on itself.
<Draggable />s of type TASK would not be able to be dropped on a <Droppable /> with type PERSON.
If no type is provided, it will be set to 'DEFAULT'.
constructor() {
..
// this.getRate(); из конструктора убрать
}
componentDidMount() {
this.getRate(); // сюда добавить
}
"scripts": {
....
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
props.menu.map(pizza =>
<CSSTransition
key={pizza._id}
timeout={300} // это задержка?
props.menu.map((pizza, index) =>
<CSSTransition
key={pizza._id}
timeout={300 * index} // тогда можно попробовать так
... you might find it easier to think that effects happen “after render”. React guarantees the DOM has been updated by the time it runs the effects.
appsService.getApp(params.pk).then(function (result) {
console.log(result); // ?
setTimeout(() => {
textInput.current.focus()
}, 0) // сработает в следующем цикле event loop-a после рендера
По className'му бы взял, но тут же мне нужно фокус ставить в том Todo, на который я нажал
document.querySelector('input[data-id="456"]')