Refactoring React components : SearchContainer 1.3.3

index.js

import React from "react";
import Search from "../../components/Search";

class SearchContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      articles: []
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
    fetch(`http://content.guardianapis.com/search?q=${event.target.value}&api-key=YOUR_API_KEY`)
      .then(response => response.json())
      .then(data => this.setState({ articles: data.response.results }));
  }

  handleSubmit(event) {
    event.preventDefault();
  }

  render() {
    return (
      <Search
        handleSubmit={this.handleSubmit}
        value={this.state.value}
        performSearch={this.handleChange}
        articles={this.state.articles}
      />
    );
  }
}

export default SearchContainer;