const [mousePosition, setMousePosition] = useState(null);
const clL = {
"dark": mousePosition === "left"
}
const clR = {
"dark": mousePosition === "right"
}
return (
<>
<div id="left" onMouseOver={() => setMousePosition("left") className={cx(clL)} onMouseLeave={() => setMousePosition(null)}></div>
<div id="right" onMouseOver={() => setMousePosition("right") className={cx(clR)} onMouseLeave={() => setMousePosition(null)}></div>
</>
)
#left:hover {
background-color: rgba(0,0,0,0.5);
}
#right:hover {
background-color: rgba(0,0,0,0.5);
}
const groupedProjects = Object.keys(groups).map((date) => {
return {
date,
projects: groups[date]
};
});
groupedProjects.map((date, arr) => (
<div className="inline">
{date}
{arr.map((item) =>
<Project
key={item.Name}
project={item}
/>
)}
</div>
))}
groupedProjects.map(({ date, projects }) => (
{date}
{projects.map()}
)
class Component {
constructor(props) {
this.props = props;
}
}
import React, { Component } from 'react';
import { Collapse, Button, CardBody, Card } from 'reactstrap';
class Example extends Component {
state = {
collapse: false
};
toggle = () => {
this.setState(state => ({ collapse: !state.collapse }));
}
render() {
return (
<div>
<Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
<Collapse isOpen={this.state.collapse}>
<Card>
<CardBody>
Anim pariatur cliche reprehenderit,
enim eiusmod high life accusamus terry richardson ad squid. Nihil
anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident.
</CardBody>
</Card>
</Collapse>
</div>
);
}
}
export default Example;
import debounce from "lodash/debounce";
const TIME_OUT = 1000;
const handleSearch = debounce(({ target: { value } = {} }) => {
//что-то делаем
}, TIME_OUT)
$yourInput.addEventListener("input", handleSearch, false);
return <Item
onClick={handleSelectedItem.bind(List, item.id)}
key={item.key}
isActive={item.isActive}
text={item.text}
/>
key={item.id}
const data = {
"RU":[{
"name":"Русский",
"img":"/flag/RU.png",
"courses":{
"gramm":[{
"name":"Грамматика",
"img":"/icon1.png"
}],
"prav":[{
"name":"Правописание",
"img":"/icon2.png"
}]
}
}],
"EN":[{
"name":"Английский",
"img":"/flag/EN.png",
"courses":{
"gramm":[{
"name":"Грамматика",
"img":"/icon3.png"
}]
}
}]
}
const countries = [], courses = [];
$.each(data, (lng, [{ name, img, courses: crs }]) => {
countries.push([lng, name, img]);
$.each(crs, (crsName, [{ name, img }]) => {
courses.push([lng, name, img])
})
});
countries //
[
["RU", "Русский", "/flag/RU.png"],
["EN", "Английский", "/flag/EN.png"]
]
courses //
[
["RU", "Грамматика", "/icon1.png"],
["RU", "Правописание", "/icon2.png"],
["EN", "Грамматика", "/icon3.png"]
]
import { render } from './component'
export class Component {
constructor(config) {
this.template = config.template
this.selector = config.selector
this.el = null
}
render() {
this.el = document.querySelector(this.selector)
if (!this.el) throw new Error(`Component with selector <${this.selector}> wasn't found`)
this.el.innerHTML = this.template
}
}
import './style.css';
const timeout = 5000,
content = document.querySelectorAll('div.main-content');
if (localStorage.getItem('mainContent') !== 'shown') {
setTimeout(() => {
content.forEach(i => i.classList.add('shown'));
localStorage.setItem('mainContent', 'shown');
}, timeout);
} else {
content.forEach(i => i.classList.add('shown'));
}
div.main-content {
display: none;
}
div.main-content.shown {
display: block;
}
<div class="main-content">1</div>
<div class="main-content">2</div>
<div class="main-content">3</div>