Trying to display search history with react and the Reddit API

Trying to display search history with react and the Reddit API

react router
react search bar component
react search tutorial
react router history
search logic in react
react search bar with suggestions
react search bar codepen
react router history location. search

I'm trying to use the reddit API with react so that when the user looks up a subreddit it will display all of the threads from that subreddit along with other info. I'm trying to incorporate a history feature that will display user history and will allow the user to display info from that search when they click on one of their previous searches. In order to do this I created a state variable of an array that will contain all of the users previous searches and a component called history that will take this array and display all of the searches as clickable buttons. However, when I'm trying to import my History component I get an error saying that './History' doesn't contain a default export even though it does and I can't figure out why. Here is App.js:

import History from './History/History';

class App extends React.Component{
  constructor(){
    super();
    this.state={
      threads: [],
      loading:false,
      previousSearch: []
    };
  }
  handleSearch = async (searchValue) => {
    this.setState({ loading: true });

    let [threads] = await Promise.all([
      getThreads(searchValue)   
    ]);
    console.log(searchValue)

    this.setState({ threads, loading: false, previousSearch:this.state.previousSearch.concat(searchValue)});
  }
  render(){
    return (
      <div>
        <SearchForm onSearch={this.handleSearch}/>
        {this.state.loading && <Loading />}
        <History previousSearches={this.state.previousSearch}/>
        <div>
        <ThreadList threads={this.state.threads}/>
        </div>
      </div>
      );
  }
}

And here is History.js:

import React from 'react'

export default function History(props){
  {props.previousSearches.map((term) => {
   return (
    <button type="button" onClick={this.applyPreviousSearch.bind(this, term)}>
      {term}
    </button>
  );
})}
}

I think there's an error in History.js

This is how it should look

export default function History(props) {
    return props.previousSearches.map((term) => {
        return (
            <button type="button" onClick={this.applyPreviousSearch.bind(this, term)}>
              {term}
            </button>
        );
    })
}

Also take care binding this because it depends on the context and it's not straightforward to me to understand it in runtime.

How To Write a Search Component with Suggestions in React, Using an external API to provide Search Suggestions. Tagged Share to Twitter Share to LinkedIn Share to Reddit Share to Hacker News Share to Is there a library that solves what I'm trying to accomplish and should I use it? A presentational (stateless functional) component for displaying the results. Otherwise and empty search bar won't display any tasks. So if the search bar is not empty, we want to run the .filter() function and see if the current item contains the search terms. If it does, then we will return that item to the newList array.


You need to return from the History.js.

import React from 'react';
export default function History(props)  {

     return props.previousSearches.map((term) => { 
          return (
                 <button type="button" onClick={this.applyPreviousSearch.bind(this, term)}> {term} </button> 
          ); 
     });
 }

React Search Bar: Let's build a search bar in React!, React Search Bar Let's build a search bar in React! Now that we have a package.json file, we should create our index.html and app.js files. Now that we have our list in the App component's state, lets display that list. well enough or you're struggling with it, leave a comment and I'll try to help you get it. What I am trying to accomplish is displaying the data (name and email) from the API call that I made and then filter() the results from typing in the input field the name that I want to see.


I just wanted to chime in that in addition to what Sergio said it is sometimes helpful to restart your IDE if it's giving you an unexpected error message. Sometimes the IDE's error checking crashes/caches or stops functioning properly and a restart helps.

Usage with React Router, Advanced Tutorial > Usage with React Router: Tips on using Redux with React Router. we will need it further on when we try to read the parameter :filter from the URL. Show: <FilterLink filter={VisibilityFilters. Even if you are going back with your browser, it will use your browser's history and Example: Reddit API ». Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Learn more How can I view network requests (for debugging) in React Native?


How to Create a Reddit Clone Using React and Firebase, In this article, we'll be using Firebase along with Create React App to build an app that will Using Firebase will make it very easy for us to show real-time data to the user. You can check my commit on GitHub. We pass in the history prop to it so that the routes know how to handle history tracking. While trying to implement the google maps API in a personal react.js project I came across a couple of examples that I found to be very complicated and confusing. So here is a brief and simple example of how I used Google Maps in my app! First, things first! Go to the Google maps API page, sign-up and get a token to use! You must enter a credit


Recently Active 'reactjs' Questions - Page 693, React (also known as React.js or ReactJS) is a JavaScript library developed by Facebook for Trying to display search history with react and the Reddit API. There are no plans to remove classes from React. You can read more about the gradual adoption strategy for Hooks in the bottom section of this page. Hooks don’t replace your knowledge of React concepts. Instead, Hooks provide a more direct API to the React concepts you already know: props, state, context, refs, and lifecycle.


Testing React Applications, In this article, we are going to use the Reddit API example app in the The main functionality of the app is to display the current headlines in a selected subreddit, By convention, jest will find test files with names ending in .test.js under I encourage you to explore this some more and try to write out some  React Native Apps is a showcase of only open source React Native apps. These apps do not have to be published to the App Store or anything, they are simply here to showcase work from within the community, and to help React Native developers by seeing how others are building and structuring their applications.