CODEWITHSUNDEEP
javascriptreactjs
M. Greco
M. Greco

Reputation: 49

Why is my onChange event not working in React?

I am coding a simple search input component for an app that will eventually become larger, but I am at a loss for why the onChange prop associated with it isn't being called. Here I will show my search input component and the app component into which I import it: 

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class SearchInput extends Component {
    static defaultProps = {
        onChange: () => Promise.resolve(),
    }

    static propTypes = {
        onChange: PropTypes.func,
        value: PropTypes.string,
    }

    render() {
        const { value } = this.props;
        return (
            <input className="search-input" type='text' onChange={this.handleChange} value={value}/>
        )
    }

    handeChange = (e) => {
        const { onChange } = this.props;

        onChange(e);
    }
}

And then here's my main app component (very simple still, and keep in mind that I have list-rendering functionality, but that isn't where my issue lies). I'm pretty sure the issue lies somewhere in the handleSearchDidChange method that I wrote up and tacked onto the onChange prop for the SearchInput component: 

import React, { Component } from 'react';
import Container from './components/container'
import List from './components/list'
import SearchInput from './components/search-input';

// Styles
import './App.css';

export default class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      searchValue: undefined,
      isSearching: false,
    }
    // this.handleSearchDidChange = this.handleSearchDidChange.bind(this);
  }

  render() {
    // in the main render, we render the container component (yet to be styled)
    // and then call renderList inside of it. We need "this" because this is 
    // a class-based component, and we need to tell the component that we are 
    // using the method associated with this class
    return (
      <div className="App">
        <Container>
            {this.renderSearchInput()}
            {this.renderList()}
        </Container>
      </div>
    );
  }

  renderSearchInput = () => {
    const { searchValue } = this.state;
    return (<SearchInput onChange={this.handleSearchDidChange} value={searchValue}/>)
  }

  renderList = () => {
    // return the list component, passing in the fetchData method call as the data prop
    // since this prop type is an array and data is an array-type prop, this is 
    // acceptable
    return <List data={this.fetchData()}/>
  }
  // possibly something wrong with this method? 
  handleSearchDidChange = (e) => {
    const { target } = e;
    const { value } = target;

    this.setState({
      searchValue: value,
      isSearching: true,
    });

    console.log('value: ', value);
    console.log('searchValue: ', this.state.searchValue);
    console.log('-------------------------')

    }


  fetchData = () => {
    // initialize a list of items
    // still wondering why we cannot put the listItems constant and the 
    // return statement inside of a self-closing setTimeout function in 
    // order to simulate an API call
      const listItems = [
        {title: 'Make a transfer'},
        {title: 'Wire money'},
        {title: 'Set a travel notice'},
        {title: 'Pop money'},
        {title: 'Edit travel notice'},
        {title: 'test money things'},
        {title: 'more test money things'},
        {title: 'bananas'},
        {title: 'apples to eat'},
        {title: 'I like CocaCola'},
        {title: 'Christmas cookies'},
        {title: 'Santa Claus'}, 
        {title: 'iPhones'},
        {title: 'Technology is amazing'},
        {title: 'Technology'},
        {title: 'React is the best'},
    ];
    // return it
      return listItems;
  }

Upvotes: 2

Views: 2429

Answers (2)

Duderino9000
Duderino9000

Reputation: 2597

You have a typo! Missing the "l" in handleChange :)

handleChange = (e) => {
        const { onChange } = this.props;

        onChange(e);
    }

Upvotes: 2

Amir Rezvani
Amir Rezvani

Reputation: 1504

i run your code in sandBox: https://codesandbox.io/s/onchange-problem-37c4i

there is no issue with your functionality as far as i can see.

but in this case if onChange dose not work for you is because maybe inside of < SearchInput /> component you don't pass the value up to the parent element.

check the sandBox and notice to the SearchInput1 and SearchInput2

Upvotes: 0

Related Questions