CODEWITHSUNDEEP
reactjs
jatin yadav
jatin yadav

Reputation: 23

Expected `onChange` listener to be a function, instead got a value of `object` type

I'm new to react and practicing on react.On building my react app on handling event onChange I am always getting the error Error: Expected onChange listener to be a function, instead got a value of object type.

I have also tried to do this onChange={()=> searchChange} and it still not printing the event.

Search box Component

import React from 'react';

const SearchBox=(searchfield,searchChange)=>{
    return (
        <div className='pa2'>
        <input
        className='pa3 ba b--green bg-lightest-blue' 
        type='search' 
        placeholder='search robots'
        onChange={searchChange}
        />
        </div>
        );
}
export default SearchBox;

App Component

import React,{Component} from 'react';
import Cardlist from './Cardlist';
import {robots} from './robots';
import SearchBox from './SearchBox';

class App extends Component{
    constructor(){
        super();
        this.state={
            robots:robots,
            searchfield:''
        }
    }
    onSearchChange=(event)=> {
        console.log(event);
    }
    render(){
        return(
        <div className='tc'>
        <h1> RoboFriends </h1>
        <SearchBox searchChange={this.onSearchChange}/>
        <Cardlist robots={this.state.robots} />
        </div>
        );
    }
}
export default App;

I want to print the event on the console.

Upvotes: 2

Views: 3594

Answers (1)

pritam
pritam

Reputation: 2558

You're passing a prop searchChange from App to SearchBox component -

<SearchBox searchChange={this.onSearchChange}/>

But you're using it wrong here -

const SearchBox=(searchfield,searchChange)=>{

Change the de-structured props of SearchBox to -

const SearchBox=({ searchfield,searchChange })=>{

Upvotes: 3

Related Questions