Q:

React - How to set a state on a children when clicking on the parent

I have a search bar on a children component who's displaying a pannel when i'm writing inside,
and I'm trying to close it on my parent when I'm clicking outside of this pannel.
So I need a solution to set a state to false at this moment.
Any idea ?
Here's an example of my code:
[parent.js]
constructor(props) {
  super(props)
  this.state = {
    showResults: false
  }
}

render() {
  return (
    <div onClick={() => this.setState({showResults: false})}>
      <div>
        <Children showResults={this.state.showResults}/>
    </div>
  </div>)
}

[children.js]
constructor(props) {
  super(props)
  this.state = {
    showResults: this.props.showResults
  }
}

getResults(event) {
  this.setState({input: event.target.value, showResults: true})
}

render() {
  return (<div>
    <Input onChange={this.getResults.bind(this)}/>
    this.state.showResults ?
      <div>PANNEL</div>
      : ''
  </div>)
}

A:

I finally did it using Redux, I have created a ShowPannel reducer who just have a boolean visible state inside. Here's my code:
[My view] :
render() {
  return (<div onClick={() => this.props.showPannel(false)}>
    {
      this.props.visible
        ? <div className="listResults"></div>
        : ''
    }
  </div>)
}

function mapStateToProps(state) {
  return {visible: state.showPannelReducer.visible};
}

function mapDispatchToProps(dispatch) {
  return {
    showPannel: (visible) => dispatch(showPannel(visible))
  }
}

Home = connect(mapStateToProps, mapDispatchToProps)(Home);

export default Home;

[My reducer] :
import {SHOW_PANNEL} from '../actions/pannel/types';

const initialState = {
  visible: false
};

function showPannelReducer(state = initialState, action) {
  switch (action.type) {
    case SHOW_PANNEL:
      return {
        ...state,
        visible: action.visible
      }
    default:
      return state
  }
};

export default showPannelReducer;

