less than 1 minute read

How to pass data from child component to its parent in ReactJS?


Father -> Child

import React from 'react';
import SearchBar from './SearchBar_copy';

class App extends React.Component {

  father(term) {
    console.log(term);
  }

  render() {
    return (
      <div>
        <SearchBar fromChild={this.father} />
      </div>
    );
  }
}

export default App;

Child -> Father

import React from 'react';

class SearchBar extends React.Component {
  state = { term: '' };
  //
  searchValue(event) {
    event.preventDefault();
    this.props.fromChild(this.state.term);
  }
  //
  // render() {
  //   return (
  //     <div className="ui segment">
  //       <form
  //         onSubmit={event => {
  //           this.searchValue(event);
  //         }}
  //         className="ui form"
  //       >
  //         <div className="field">
  //           <label>Image Search</label>
  //           <input
  //             type="text"
  //             value={this.state.term}
  //             onChange={event => this.setState({ term: event.target.value })}
  //           />
  //         </div>
  //       </form>
  //     </div>
    );
  }
}

export default SearchBar;

Categories:

Updated: