Петр Мухуров

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)
  )
});

`${a.slice(0, 5)},<strong>${a.slice(5, 7)}</strong>`

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>
  )
}

function fearNotLetter(str) {
  const letters = str.split("");
  
  const letter = letters.reduce((acc, letter, index) => {
    if (acc !== undefined) return acc;

    const prevLetterCode = (letters[index - 1] || letter).charCodeAt();

    if (letter.charCodeAt() - prevLetterCode  > 1) return String.fromCharCode(prevLetterCode  + 1)

    return undefined;
  }, undefined);

  return letter;
}

fearNotLetter("abce");
//d

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

const env = process.env;
const __DEV__ = env.NODE_ENV === "development";

const BASE_CSS_LOADER = {
  loader: "css-loader",
  options: {
    importLoaders: 2,
    sourceMap: true,
    minimize: true
  }
};
const CSS_MODULES_LOADER = {
  loader: "css-loader",
  options: {
    importLoaders: 2,
    localIdentName: "[name]__[local]___[hash:base64:5]",
    modules: true,
    sourceMap: true,
    minimize: true
  }
};
const POSTCSS_LOADER = {
  loader: "postcss-loader",
  options: {
    sourceMap: true,
    plugins: [autoprefixer],
    minimize: true
  }
};
const STYLE_LOADER = __DEV__ ? "style-loader" : MiniCssExtractPlugin.loader;
config.module.rules = [].concat(config.module.rules, [
  {
    test: /\.module\.scss$/,
    use: [
      STYLE_LOADER,
      CSS_MODULES_LOADER,
      POSTCSS_LOADER,
      "sass-loader?sourceMap"
    ]
  },
  {
    test: /\.module\.css$/,
    use: [STYLE_LOADER, CSS_MODULES_LOADER, POSTCSS_LOADER]
  },
  {
    test: /\.scss$/,
    exclude: /\.module\.scss$/,
    use: [
      STYLE_LOADER,
      BASE_CSS_LOADER,
      POSTCSS_LOADER,
      "sass-loader?sourceMap"
    ]
  },
  {
    test: /\.less$/,
    exclude: /\.module\.less$/,
    use: [
      STYLE_LOADER,
      BASE_CSS_LOADER,
      POSTCSS_LOADER,
      "less-loader?sourceMap"
    ]
  },
  {
    test: /\.css$/,
    exclude: /\.module\.css$/,
    use: [STYLE_LOADER, BASE_CSS_LOADER, POSTCSS_LOADER]
  }
]);

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>
    );
  }
}

watchList.filter(({ imdbRating }) => +imdbRating > 8).map(({ title, rating }) => ({ title, rating }))