Nikita Shchypylov

const { data } = response.getuserworkersinfo;

const targetUser = Object.values(data).find(({ user }) => user === 'ole.5');

const { rate } = targetUser;

const employees =  ['Bill', 'Matt', 'Sarah'];

return (
  <ul>
    {employees.map((employee, i) => (
      <li key={i}>employee</li>
    )}
  <ul>
);

<ul>
  <li>Bill</li>
  <li>Matt</li>
  <li>Sarah</li>
</ul>

class Example extends Component {
  state = {
    elements: [],
    page: 1,
    limit: 20,
    total: 0,
    isLoading: false,
    isError: false,
  };
  
  componentDidMount() {
    this.loadThumbnails();
  }
 
  loadThumbnails = () => {
    const { page, limit } = this.state;
    
    this.setState({
      isLoading: true,
      isError: false,
    }, () => {
      axios.get(
        `api/somePath?limit=${limit}&page=${page + 1}`
      ).then(response => {
        const { data: { elements, total } } = response;
      
        this.setState(prevState => ({
          elements: [
            ...prevState.elements,
            ...elements
          ],
          page: page + 1,
          isLoading: false,
          total,
        }));
      }).catch(error => {
        this.setState({
          isLoading: false,
          isError: true,
        });
      });
    });
  };
  
  render() {
    const {
      elements,
      page,
      limit,
      total,
      isLoading,
    } = this.state;

    const hasMore = page * limit < total;

    return(
      <MasonryInfiniteScroller
        hasMore={hasMore}
        loadMore={this.loadThumbnails}
      >
        {elements.map(element => (
          <img
            key={element.id}
            src={element.thumbnail}
            style={{
              width: element.width + 'px',
              height: element.height + 'px',
            }}
          />
        )}
        {isLoading && <div>...Loading</div>}
        {isError && (
          <div>
            Can't load data. Please, check your internet connection.
            <button onClick={this.loadThumbnails}>
              Try again
            </button>
          </div>
        )}
      </MasonryInfiniteScroller>
    ); 
  }
}

Как давно в JS можно не писать function в первом примере?

let bar = {
    test: 'A',
    foo() {
        console.log(this.test);
    }
}

bar.foo(); // A

class Bar {
    constructor() {
        this.test = 'B';
    }
    foo() {
        console.log(this.test);
    }
}

(new Bar()).foo(); // B

export const addComponent = data => {
  return async function(dispatch) {     //  тут добавлен return и аргумент
    let comps = await fire.database().ref("components");
    comps.push({
      name: data.component,
      comp: data.component_name
    });

     //так же в любое время вы можете вызвать dispatch
     dispatch({ type: 'someAction', payload: 'someValue' });
  };
}

const foo = x => {
  return  y => {
    return x + y;
  }
};

const foo = x => y => x + y;

const a = x(5);
const b = a(6);

console.log(b);
// => 11

export const addComponent = data => async dispatch => {
  let comps = await fire.database().ref("components");
  // функция продолжит выполнение только когда вернется значение присвамваемое comps
  comps.push({
    name: data.component,
    comp: data.component_name
  });
};

createCheckboxes = () => {
  const data = this.props.pets[0] || {};
  const newAnimals = Object.values(data).map(el => el.animal);
 
  this.setState(({ animals }) => ({
    animals: [ ...animals, ...newAnimals ],
  }));
};