React, Searchbar problems

1

Hello everyone I’m building a project and I’ve hit a little bit of a wall.
I am building a small app that displays a bunch of cards of kittens with names and emails from an API. That part is working just fine. The thing that I messed up was the search bar.

export const Searchbar = props => (
    <div>
    <input type='search' placeholder="Search for a Kitten" onChange={e => this.props ({searchfield: e.target.value})} /> 
    </div>
)

I think I can understand what is going wrong, my arrays are not being passed as props. However I am unsure how to fix it.

<div className="App">
              <Searchbar kittens={this.state.kittens} searchfield={this.state.searchfield} />
        <Cardlist kittens={this.state.kittens} />
        
      </div>

this is from the main App file where I am passing things.
In case you need to see everything, i dumped all the code in a codepen here : https://codepen.io/Dylanbozarth/pen/VwYyBNw

Thank you in advance for your expertise.

2

First thing: your code won’t work on codepen, because you’re trying to make module files with all those imports work there. That’s not how it works. You work with a single .js file (as well as .html and .css).

Second: your arrays are, in fact, passed down with props just fine, you can see it the debugger. The thing where things are being messed up is your onChange handler.
You made the following mistakes:

  • mistakenly put this. before props. Your SearchBar component is not a class component but a functional one. You need this in classes only.
  • assume that props is a function when you call it: this.props(...) (where this should be omitted)

It is also not clear what are you trying to achieve with that input handler?

Here’s your code working properly on codepen.
Please consult it so we can move further.

Edit: mistakes

2 Likes
3

your trying to change the parent state in wrong way
you can define a handler in parent component like this:

  handleSearch(e) {
    this.setState({
      searchfield: e.target.value
    })
    // console.log(e.target.value)
  }

and then send it to the child as props :

<Searchbar kittens={this.state.kittens} searchfield={this.handleSearch} />
2 Likes
4

Thank you both for your replies. This will be enough help for me to figure it out.
Also FYI I am doing the project in Vscode, not codepen. I just dumped all the code there so you could view the full code. I didn’t mean for the code to actually work on codepen, it was just storage.
I will attempt to solve this now, Thanks for your help.