Main Component

App.js

import React, { Component } from 'react';
import { Grid, Row, Col } from 'react-bootstrap';
import axios from 'axios';

import Header from './Header';
import Content from './Content';
import LoadMore from './LoadMore';
import Footer from './Footer';

import './styles/app.css';

const URL = 'https://www.mocky.io/v2/5a6bc16631000078341b8b77';

class App extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
          description: '',
          list: []
      };
    
      this.refresh = this.refresh.bind(this);
      this.handleChange = this.handleChange.bind(this);
    
      this.refresh();
    }
    
     async refresh() {
      const response = await axios.get(URL);
      this.setState({ ...this.state, list: response.data.links });
    }
    
    handleChange(e) {
      this.setState({ ...this.state, description: e.target.value });
    }
      
  render() {
    return (
      <Grid>
        <Row>
          <Col md={10} mdOffset={1}>
            <Header 
              handleChange={this.handleChange}              
            />
            <Content                 
            list={this.state.list}
            description={this.state.description}
            />
            <LoadMore />
            <Footer />
          </Col>
         </Row>
      </Grid>
    );
  }
}

export default App;