Вы можете комбинировать это с помощью одной анимации и одного элемента.
Вот идея:
.box {
height:250px;
width:50px;
background:
/*Gradient that we will animate*/
linear-gradient(to bottom,
red 0px,red 30px,
transparent 30px,transparent 50px,
rgba(255,0,0,0.5) 50px, rgba(255,0,0,0.5) 80px,
transparent 80px,transparent 100px,
rgba(255,0,0,0.2) 100px, rgba(255,0,0,0.2) 0)
0 0/100% 130px no-repeat,
/*Bottom gradient*/
repeating-linear-gradient(to bottom,
rgba(255,0,0,0.3) 0px,rgba(255,0,0,0.3) 30px,
transparent 30px,transparent 50px);
animation:change 1s infinite steps(10);
}
@keyframes change {
from {
background-position:0 250px,0 0
}
to {
background-position:0 -250px,0 0;
}
}
<div class="box">
</div>
Ошибка очевидна. Компонент в реакции должен возвращать элемент jsx или набор элементов jsx.
В вашем компоненте Services метод рендеринга ничего не возвращает.
Похоже, вы хотите, чтобы компонент Services отображал DataTable, поэтому замените приведенный ниже код в компоненте Services [3] решить вашу проблему.