NavLink fails to link

[sonnykbp]

Hi James! I got my search functionally to work but my "go back to search" link doesn't take me back to the search form page. Instead it stays on the search result's page.

So I want to go from here:

Back to here:

import React, { Component } from 'react';
import {NavLink} from 'react-router-dom'
// import Search from '../Search/Search'
class Results extends Component {

 render(){
   let results = this.props.posts.map((post, indexKey) => {

       return(
        // <Item key={indexKey} item={this.itemList(post)} />
        <div key={indexKey}>
        <p>{post}</p>
        </div>
       )
   })
   console.log(results);
   return (
     <div>
       <p><NavLink exact to="/search">Go back to Search</NavLink></p>
       {results}
     </div>
   );
 }
}

export default Results;

SearchContainer.js

import React, { Component } from 'react';
import Search from '../Search/Search.js'
import Results from '../Results/Results.js'


class SearchContainer extends Component {

  constructor(props){
    super(props)

    this.state = {
      hasSearched: false,
      posts: this.props.posts,
      filteredPosts: [],
      query: ''
    }
    //preserve context(parent scope) of SearchContainer and handleSearchInput
    this.onSubmitQuery = this.onSubmitQuery.bind(this)
    this.handleSearchInput = this.handleSearchInput.bind(this)
  }
  //switch hasSearched to true
  onSubmitQuery(e){
    e.preventDefault()
    this.setState({hasSearched: true})
    const posts = this.state.posts
      .map( board => {
        return board.posts.map( post => post.item_name)
      })
      .reduce((a,c)=> [...a, ...c])

    console.log(posts);

    let filteredPosts = posts.filter( post => post.includes(this.state.query.toLowerCase() ))

    this.setState({filteredPosts: filteredPosts})


  }



  handleSearchInput(e){
    this.setState({query: e.target.value})

  }

  render(){
    const toRender = this.state.hasSearched ? <Results posts={this.state.filteredPosts} /> : <Search hasSearched={this.state.query} onSubmitQuery={this.onSubmitQuery}
    handleSearchInput={this.handleSearchInput}/>

    return (
      <div>
        {toRender}
      </div>
    )
  }
}

export default SearchContainer

[superbuggy]

you have to reset this.state.hasSearch to false after you redirect to <Results/>

[sonnykbp]

I still have a hard time with this one :( I keep getting this error:

I'm not sure if I'm putting the clearSearch method in the right component or not.

App.js

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link,
  Redirect
} from "react-router-dom"
import axios from "axios"
import './App.css'
import Dashboard from './Components/Dashboard/Dashboard'
import About from './Components/About/About'
import Home from './Components/Home/Home'
import Post from './Components/Post/Post'
import SinglePost from './Components/SinglePost/SinglePost'
import SearchContainer from './Components/SearchContainer/SearchContainer'
import Results from './Components/Results/Results'
import './App.css'

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      hasSearched: true,
      posts: []
    }
  }

  componentDidMount(){
    axios.get("http://localhost:3001/api/categories").then((response) => {
      this.setState({
        posts: response.data
      })
    })
  }

  clearSearch() {
    this.setState({
      hasSearched: false
    })
    console.log(this.state.hasSearched);
  }

  render() {
    return (
      <Router>
        <div>
          <div className="navbar">
            <div className="logo-left">
              <div className="logo-nav">

              </div>
              <Link to="/home">SWAPT</Link>
            </div>
            <nav className="nav">
              <Link to={{
                pathname: "/home",
                state: { posts: this.state.posts }
              }}>Home</Link>
              <Link to="/categories">Swap</Link>
              <Link to="/about">About</Link>
              <Link to="/search">Search</Link>
            </nav>
          </div>

          <main className="wrapper">
            <Route
              exact path="/home"
              render={ () => {
                return(
                  <div>
                    <Home />
                  </div>
                )
              }}
            />
            <Route
              exact path="/categories"
              render={ () => {
                return(
                  <div>
                    <Dashboard posts={this.state.posts}/>
                  </div>
                )
              }}
            />
            <Route
              exact path="/about"
              component={About}
            />
            <Route
              exact path="/search"
              render={ () => {
                return(
                  <div>
                    <SearchContainer posts={this.state.posts}/>
                  </div>
                )
              }}
            />
            <Route
  path="/results"
  render={() => {
    return(
      <Results
        clearSearch={() => this.clearSearch()}
      />
    )
  }}
/>
            <Route
              exact path="/categories/:type"
              component={Post}
            />
            <Route
              exact path="/categories/:type/:item_name"
              component={SinglePost}
            />
            <Route
              path="/*"
              render={() => {
                return <Redirect to="/home" />
              }}
            />
          </main>
        </div>
      </Router>
    );
  }
}

export default App;

Results.js

import React, { Component } from 'react';
import {NavLink} from 'react-router-dom'
// import Search from '../Search/Search'
class Results extends Component {
  componentDidMount() {
    this.props.clearSearch()
  }
  render(){
    let results = this.props.posts.map((post, indexKey) => {

      return(
        // <Item key={indexKey} item={this.itemList(post)} />
        <div key={indexKey}>
          <p>{post}</p>
        </div>
      )
    })
    console.log(results);
    return (
      <div>
        <p><NavLink exact to="/search">Go back to Search</NavLink></p>
        {results}
      </div>
    );
  }
}

export default Results;