How to Pass a Variable from Child to Parent

Question

I have a react function. This function returns a search bar. When the search bar is changed a variable called esQueryDsl is set. I want to pass this variable back to the parent and also render the search bar.

Child:

export const SearchBar2 = (props) => {  
  const [query, setQuery] = useState(initialQuery);
  const [error, setError] = useState(null);

  const onChange = ({ query, error }) => {
    if (error) {
      console.log(error);
      setError(error);
    } else {
      console.log("query");
      setError(null);
      setQuery(query);
    }
    let esQueryDsl;
  
    try {
      esQueryDsl = EuiSearchBar.Query.toESQuery(query);
    } catch (e) {
      esQueryDsl = e.toString();
    }
  };

  const renderSearch = () => { 
    return (
      <EuiSearchBar
        defaultQuery={initialQuery}
        box={{
          placeholder: 'search'          
        }}
        onChange={onChange}
      />
    );
  };

  return (    
    <Fragment>
      <EuiFlexGroup alignItems="center">
        <EuiFlexItem>{renderSearch()}</EuiFlexItem>
      </EuiFlexGroup>
    </Fragment>
  );
};

Parent:

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      query: EuiSearchBar.Query.MATCH_ALL
    }        
    this.handleSearchFill = this.handleSearchFill.bind(this);
  }
  
  handleSearchFill = (data) =>{
    console.log('handleSearchFill')
    this.setState({query:data})
  }
  
  render() {
    return (
      <>
        <EuiPage> 
            <SearchBar2 onChange={this.handleSearchFill}/>  
        </EuiPage> 
      </>
    );}
}

When the search state is changed "query" gets logged to the console but "handleSearchFill" does not.

My intention is to pass the esQueryDsl back to the parent. Then pass it to a different child to render the results.

I was trying to refer to this question.

You could put the state in the parent component, and pass the updater function to the child component. — BlackMath, Nov 09 '20 at 15:30
I think you're suggesting moving the onChange code from the child to the parent. The problem I have is that react doesn't allow me to use useState() in a class component. — spyderman4g63, Nov 09 '20 at 15:38
just add props.onChange(esQueryDsl) after `esQueryDsl = EuiSearchBar.Query.toESQuery(query);` — nir shabi, Nov 09 '20 at 15:38

Gowtham · Accepted Answer · 2020-11-09T15:54:18.093

Instead of defining a new state variable in the child. Use the state of the parent and pass a function that manipulates this state to the child. Now, whenever the query changes in the child, use the function passed as props to change the parent state. This is called lifting up the state.

From the code, I see that you've already done that

Changes:

Add this line in the try block in your onChange function

props.onChange(esQueryDsl);

Also, I don't think, the state query is useful in the child component.

To use this state in another child of the same parent, just pass this state (query) as a prop to that child.

Ex:

// In parent     
return (
        <EuiPage> 
            <SearchBar2 onChange={this.handleSearchFill}/>  
            <SecondChild query={this.state.query}/>
        </EuiPage> 
);

How to Pass a Variable from Child to Parent

1 Answers1