title: Pass a value from an input for pagination in React.js
body: <p>Im trying to make a very easy pagination function on a react 16 project, my thought is just to pass the buttons value to the api query to get the "&amp;page=" number and navigate to second page, third and so on.
  Im using unsplash api for consuming pictures. I think a "prev, next" button should be enough but I cant find a good way to do it wothout making lot of changes.</p>
  
  <p>I tryied some solutions I found here. but none of them apply to my simple idea.</p>
  
  <pre><code>import React, { Component } from 'react';
  import axios from 'axios';
  import './App.css';
  import ItemList from './components/ItemList';
  import Navigation from './components/Navigation';
  import SearchImg from './components/SearchImg';
  import Pagination from './components/Pagination';
  import Footer from './components/Footer';
  
  export default class App extends Component {
      constructor() {
      super();
      this.state = {
        imgs: [],
        loadingState: true
      };
  }
  
  componentDidMount() {
    this.performSearch();
  }
  
  performSearch = (query = 'guitar') =&gt; {
  var pagi = [1]; // here is the variable I should pass the values to.
  
  
  var headers = {
   'Authorization': 'Bearer xxxxxxxxxxxxxxxxxxxx'
  }
  axios({
  method: 'GET',
  url: 'https://api.unsplash.com/search/photos?page='+(pagi)+'&amp;per_page=20&amp;query='+(query), 
  
  //(pagi) is where I want to pass the values
  
  
  headers: headers,
  }).then(data =&gt; {
  this.setState({ imgs: data.data.results, loadingState: false });
  })
  .catch(err =&gt; {
  console.log('Error happened during fetching!', err);
  });
  
  };
  
  render() {
    return (
    &lt;div className="container"&gt;
    &lt;Navigation /&gt; // This is just a hardcode html buttons navigation.
  
  //maybe just adding two buttons, one for prev, one for next should be enough?.
  
    &lt;div&gt;
    &lt;SearchImg onSearch={this.performSearch} /&gt;
    &lt;/div&gt;
    {this.state.loadingState
    ? &lt;p style={centrar}&gt;Loading...&lt;/p&gt;
  
    : &lt;ItemList data={this.state.imgs} /&gt;}
      &lt;Footer /&gt;
    &lt;/div&gt;
  
    );
  }
  }
  </code></pre>