Lifting message up in REACT

Question

I want to do a real time searching in React. How can I lift the message up from child to parent? Or how can I pass a parent handler to children through props to handle the event?

parent class:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activities: activities,
            filteredActivities: activities,
        };
        this.handleSearchChange = this.handleSearchChange.bind(this);
    }

    filterActivity = searchText => {
        return this.state.activities
        .filter(activity => {
            if(activity.content.toLowerCase().includes(
                searchText.toLowerCase())
            ){
                return true;
            }
            return false;
        });
    }

    handleSearchChange = event => {
        this.setState({
            filteredActivities: this.filterActivity(event.target.value)
        });
    };

    render() {
        const filteredActivities = this.props.filteredActivities;
        return(
            <div className="notificationsFrame">
                <div className="panel">
                    <Header name={this.props.name} />
                    <SearchBar onChange={this.handleSearchChange} />
                    <Content activities={this.state.filteredActivities} />
                </div>
            </div>
        );
    }
}

Child class:

class SearchBar extends React.Component {
    onChangeHandler = event => {
        console.log(event.target.value);
    }
    render() {
        return (
            <div className="search-bar" >
                <input type="text" onChange={this.onChangeHandler} />
            </div>
        );
    }
}

I want to pass the event.target.value to handleSearchChange. if I put the code of class Searchbar to class App, I can perform a real time searching very good. But I can't put them into two components. I want to make them into two components. Thanks a lot.

Does this answer your question? [How to pass data from child component to its parent in ReactJS?](https://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs) — Dan O, Apr 28 '20 at 12:10
there are many Stack Overflow questions regarding passing data to React parent components from child components. which of them have you researched and why did they not solve your specific problem? — Dan O, Apr 28 '20 at 12:11

Ramesh Reddy · Accepted Answer · 2020-04-28T11:45:54.070

Should be as simple as this:-

Child class:

class SearchBar extends React.Component {
  onChangeHandler = event => {
    this.props.inputChanged(event.target.value);
  }
  render() {
      return (
          <div className="search-bar" >
              <input type="text" onChange={this.onChangeHandler} />
          </div>
      );
  }
}

Parent class:

handleSearchChange = inputValue => {
  this.setState({
      filteredActivities: this.filterActivity(inputValue)
  });
};

JSX of parent class:

<SearchBar inputChanged={this.handleSearchChange} />

since you're already passing the function's reference as a prop you can access it using this.props.propName and call it.

score 0 · Answer 2 · answered Apr 28 '20 at 11:41

class SearchBar extends React.Component {

/* onChangeHandler = event => {   
    console.log(event.target.value);
} */
render() {
    const { onChange } = this.props;
    return (
        <div className="search-bar" >
            <input type="text" onChange={onChange} />
        </div>
    );
}

}

You can try this, as you already took event as a parameter in parent class for handleSearchChange method

Lifting message up in REACT

2 Answers2