search functionality returning empty array

[sonnykbp]

Hi! I'm trying to do a search function just like tv-maze and right now its returning an empty array. So my response.data is not being passed down properly from App.js to my SearchContainer.js. I'm not sure why?

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 './App.css'

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

  componentDidMount(){
    axios.get("http://localhost:3001/api/categories").then((response) => {
      this.setState({
        posts: response.data
      })
    })
  }
  render() {
    return (
      <Router>
        <div>
          <div className="navbar">
            <div className="logo-nav">
            <Link to="/home">SWAPT</Link>
          </div>
          <nav className="nav">
            <Link to="/home">Home</Link>
            <Link to="/categories">Swap</Link>
            <Link to="/about">About</Link>
          </nav>
        </div>

          <main className="wrapper">
            <Route
              exact path="/home"
              render={ () => {
                return(
                  <div>
                  <Home />
                  <SearchContainer posts={this.state.posts}/>
                </div>
                )
              }}
            />
            <Route
              exact path="/categories"
              render={ () => {
                return(
                  <Dashboard posts={this.state.posts}/>
                )
              }}
            />
            <Route
              exact path="/about"
              component={About}
            />
            <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;

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,
      query: ''
    }
    console.log(this.props.posts);
    //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})
    // console.log(this.state.posts);
  }

  handleSearchInput(e){
    // console.log(this.state.query)
    this.setState({query: e.target.value})

  }

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

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

export default SearchContainer

[superbuggy]

met with you in person about this, about passing state through location, let me know in a new issue if you are having difficulties with that.

[sonnykbp]

Hi James! I have a separate issue now where my results are not rendering in the browser but it appears in my console log...

Results.js

import React, { Component } from 'react';
// import Item from '../Item/Item'
class Results extends Component {
  // constructor(props){
  //   super(props)
  //   this.state = {
  //     items: this.props.posts
  //   }
  // }
  itemList(post){
    post.posts.map((item, index)=>{
      console.log(item);
      return item
    })
  }
 render(){
   let results = this.props.posts.map((post, indexKey) => {

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

export default Results;