как использовать множественные стрелочные функции в javascript например в react

Множественные стрелочные функции, или стрелочные функции высшего порядка, являются мощным инструментом в JavaScript, который можно использовать, например, в React для упрощения кода и повышения его читаемости

Стрелочные функции можно использовать очень удобно в методах массивов, таких как map, filter, reduce и других. Эти методы принимают функцию обратного вызова (callback function), которую можно передать в виде стрелочной функции.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
const evens = numbers.filter(num => num % 2 === 0);
const sum = numbers.reduce((acc, num) => acc + num, 0);

В React можно использовать стрелочные функции для определения функциональных компонентов. Это делает код более читаемым и компактным.

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
};

Стрелочные функции также удобно использовать для обработчиков событий в React, так как они автоматически привязывают контекст выполнения.

class MyComponent extends React.Component {
  handleClick = () => {
    console.log('Button clicked!');
  };

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

Стрелочные функции также могут использоваться для создания Higher Order Components, которые являются функциями, принимающими компонент и возвращающими новый компонент с дополнительными свойствами или функциональностью.

const withLogger = (WrappedComponent) => {
  return (props) => {
    console.log('Props:', props);
    return <WrappedComponent {...props} />;
  };
};

const EnhancedComponent = withLogger(MyComponent);