Реагировать на бесконечный цикл

Я новичок в React и прошу прощения за свой английский.

Когда я передаю данные из дочернего в родительский компонент и нажимаю другую кнопку, они не отображаются.

как вы можете видеть в моем комментарии, setState создает бесконечный цикл, останавливая возможность обновления значения.

Я пробовал разные способы решения проблемы, создавая внутренние переменные конструктора, такие как this.name = '' и this.selected = [], и устанавливая обратный вызов как this.name = name и this.selected = selected, но не отображается, когда я нажимаю другие параметры.

Я пробовал работать с componentDidMount() и другими методами жизненного цикла, но не знаю, как это решить.

App.js (родительский компонент)

state = { name: '', selected: [] };

doParentControl = (name, selected) => {
   console.info('doParentControl name: ',name);
   console.info('doParentControl selected: ',selected);
   // this.setState({ name: name, selected: selected }) --> infinite loop
}

render() {
   console.info('-> render App')
   return (
    <div className = "App">
      <header className = "App-header">
        <h1>Map</h1>
       </header>
       <div className = "Map">
         <Navbar parentControl = {this.doParentControl}/>
         <MapComponent name = {this.state.name} selected = {this.state.selected}/>
       </div>
       <div className = "clearfix" />
   </div>
   );
}

Navbar.js (Дочерний компонент)

constructor(props) {
    super(props);
    this.selected = [false, false, false];
    this.state = { name: 'tile' };
}

handleClick = (e) => {
    this.setState({name: e.target.value});
}

handleChangeEvent = (e) => {
    switch(e.target.value) {
        case 'option1': {
            this.setState({ selected: this.selected[0] = e.target.checked})
            break;
        }
        case 'option2': {
            this.setState({ selected: this.selected[1] = e.target.checked})        
            break;
        }
        case 'option3': {
            this.setState({ selected: this.selected[2] = e.target.checked})        
            break;
        }
        default:
            break;
    }
}

doParentControlFromChild = () => {
    this.props.parentControl(this.state.name, this.selected);
}

render() {
    console.info('render Navbar ->')
    return (
        <div className = "nav-bar">
            <nav className = "App-nav">
                <div className = "buttons">
                    <button name = "tile"        onClick = {this.handleClick} value = "tile">Tile</button>
                    <button name = "tile-watercolor" onClick = {this.handleClick} value = "tile-watercolor">Tile WaterColor</button>
                    <button name = "cartografia" onClick = {this.handleClick} value = "cartografia">Cartografía</button>
                    <button name = "satelite"    onClick = {this.handleClick} value = "satelite">Satélite</button>
                    <button name = "mapa"        onClick = {this.handleClick} value = "mapa">Mapa</button>
                </div>
                <div className = "clearfix"></div>
            </nav>
            <div className = "checkbox">
                <label><input type = "checkbox" name = "option1" value = "option1"  onChange = {this.handleChangeEvent} />Option 1</label>
                <label><input type = "checkbox" name = "option2" value = "option2"   onChange = {this.handleChangeEvent} />Option 2</label>
                <label><input type = "checkbox" name = "option3" value = "option3"      onChange = {this.handleChangeEvent} />Option 3</label>
            </div>
            <div className = "clearfix" />
            { this.doParentControlFromChild() }
        </div>
    );
}