Петр Мухуров

this.setState({
  data: [
    ...data.slice(0, data.length - 1),
    { ...data[data.length - 1], year: "2141" }
  ]
});

this.setState({
  data: data.map((item, index, source) =>
    index !== source.length - 1 ? item : { ...item, year: "2141" }
  )
});

this.setState({
  data: data.reduceRight(
    (acc, item, index) => [
      ...acc,
      index !== 0 ? item : { ...item, year: "2141" }
    ],
    []
  )
});

this.setState({
  data: data.reduce(
    (acc, item, index, { length }) => [
      ...acc,
      index !== length - 1 ? item : { ...item, year: "2141" }
    ],
    []
  )
});

this.setState({
  data: Array.from(
    { length: data.length },
    (n => () => (
      n++, n !== data.length - 1 ? data[n] : { ...data[n], year: "2141" }
    ))(-1)
  )
});

const color = this.state.petrol > 0 ? "#FFF" : "#D12828";

return (
  <p style={{ color }}>{this.state.petrol}</p>
);

render() {
    return (
      <Moment interval={1000} />
    );
  }

const NewsElement = (props) =>{
  ...
  return(
    ...
      <NewsBigScreen display={display} setDisplay={setDisplay} />
    ...
  )
}

const NewsBigScreen = ({ display, setDisplay }) =>{
  const closeBigScreen = () =>{
      setDisplay('none')
  }

  return(
    <div className='newsBigScreenWrap' style={{display: display}}>
      <div className='blackBackground'>
      </div>
      <div className='NewsBigScreen' >
        <input type='submit' onClick={closeBigScreen}/>
      </div>
    </div>
  )
}

@import "~antd/dist/antd.less";
// твои переменные для переопределения
// или импорт файла с твоими переменными/стилями

const CustomizedAxisTick = ({ x, y, stroke, payload }) => (
  <g transform={`translate(${x + delta},${y})`}>
    <text x={0} y={0} dy={16} textAnchor="start" fill="#666">{payload.value}</text>
  </g>
);
...
<XAxis dataKey="name" height={60} tick={<CustomizedAxisTick/>}/>
...

class Slider extends Component {
  state = {
    active: 0
  };

  componentDidMount() {
    const { items } = this.props;

    this.timeout = setTimeout(
      () => this.updateActive(this.state.active, 1, items.length),
      5000
    );
  }
  componentDidUpdate(prevProps, prevState) {
    const { items } = this.props;
    const { active } = this.state;

    if (
      prevState.active !== active ||
      prevProps.items.length !== items.length
    ) {
      clearTimeout(this.timeout);
      this.timeout = setTimeout(
        () => this.updateActive(active, 1, items.length),
        5000
      );
    }
  }
  componentWillUnmount() {
    clearInterval(this.timeout);
  }

  updateActive = (active, step, length) => {
    this.setState({
      active: step ? (active + step + length) % length : active
    });
  };
  next = e =>
    this.setState({
      active: this.updateActive(
        this.state.active,
        +e.target.dataset.step,
        this.props.items.length
      )
    });
  goTo = e => this.updateActive(+e.target.dataset.index);

  render() {
    const { active } = this.state;
    const { items } = this.props;

    const { length, [active]: slide } = items;

    return (
      <div>
        <div className="slideshow-container">
          <div className="mySlides fade">
            <div className="numbertext">
              {active + 1} / {length}
            </div>
            <img src={slide.img} />
            <div className="text">{slide.title}</div>
          </div>
          <a className="prev" onClick={this.next} data-step={-1}>
            &#10094;
          </a>
          <a className="next" onClick={this.next} data-step={+1}>
            &#10095;
          </a>
        </div>
        <div className="dots">
          {items.map((n, i) => (
            <span
              key={n.id}
              className={`dot ${i === active ? "active" : ""}`}
              onClick={this.goTo}
              data-index={i}
            />
          ))}
        </div>
      </div>
    );
  }
}

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;

const [loading, setLoading] = useState(true);
...
Promise.all().then(() => setLoading(false));
...
return !loading ? <></> : null

render() {
  return (
    <table>
      <tbody>
        {this.state.rows.map((row, i) => <tr key={i}>{row.map((cell, k) => <td key={k}>{cell.toString()}</td>)}</tr>))}
      </tbody>
    </table>
  )
}