Btukfyl

I have this component that returns a bunch of li's on a axios get request, users input text and the search is updated..I want React to re-render the component when the searchInput is null, basically back to its original state.

  class App extends Component {

  constructor (props) {

    super(props)

    this.state = {

      searchResults: , // API Call returns an array of results

      searchInput: '', // Search Term for API Call

            searchImage:  //base_url, a file_size and a file_path.

    }

  }





performSearch = () => { // Requesting data from API

    axios.get(`${URL}api_key=${API_KEY}&language=en-US&query=${this.state.searchInput}${PARAMS}`)

        .then((res) => {

            console.log(res.data.results);

            this.setState({ searchResults: res.data.results});

        });

}

This function below is what triggers the rendering

   handleInputChange = () => {

        this.setState({

            searchInput: this.search.value // User input

        }, () => {

            if (this.state.searchInput && this.state.searchInput.length >1 ) {

                if (this.state.searchInput.length % 2 === 0) { // Request data on user input

                    this.performSearch();

                } else if (this.state.searchInput && this.state.searchInput.length === 0 ) {

                    return ({ searchResults: null}) 

                }

            }

        });

    }









import React from 'react'



const Suggestions = (props) => {

  const options = props.searchResults.map(r => (

    <li

      key={r.id} >

      <img src={`https://image.tmdb.org/t/p/w185/${r.poster_path}`} alt={r.title} />

      <a href='#t' className='rating'><i className='fas fa-star fa-fw' />{r.vote_average}</a>

    </li>

  ))

  return <ul className='search-results'>{options}</ul>

}



export default Suggestions

Issue at the moment is that is that if I search something, eg 'game of thrones' it renders the li's, however if I clear it back to an empty string, I still have left over li's...I dont't wanna see anything if the searchInput is null

Edit: performSearch is fires again while clearing searchInput and returns the last two characters which leaves me with left over li's

You haven't handled the conditions correct in the handleInputChange method. If the outer condition fails, the inner won't ever execute

 handleInputChange = () => {

    this.setState({

        searchInput: this.search.value // User input

    }, () => {

        if (this.state.searchInput && this.state.searchInput.length >1 ) {

            if (this.state.searchInput.length % 2 === 0) { // Request data on user input

                this.performSearch();

            }

        } else {

             this.now = Date.now();

             this.setState({ searchResults: }) 

        }

    });

}

Also the issue here could possible be the race condition with the API calls. It might so happen that when you clear the input although you setState to null or empty, the API then responds which sets the state again. The best way to handle is to accept only response that corresponds to the last request made

performSearch = () => { // Requesting data from API

    let now = (this.now = Date.now());

    axios.get(`${URL}api_key=${API_KEY}&language=en-US&query=${this.state.searchInput}${PARAMS}`)

        .then((res) => {

            console.log(res.data.results);

            // Accepting response if this request was the last request made

            if (now === this.now) {

               this.setState({ searchResults: res.data.results});

            }

        });

}