Как предотвратить рендеринг нового компонента рядом с кнопкой после нажатия кнопки

Question

У меня есть кнопка, когда я нажимаю ее, она отображает данные другого компонента (то есть, получает данные из API) в текущем компоненте. Но это рендеринг рядом с кнопкой:

<Button variant="contained" color="primary" style={{marginLeft: 80 , marginTop: 35 , marginBottom: 10}} onClick={this._onButtonClick}>
  Search
</Button>
{this.state.showComponent ?
  <NewComponent A = {this.state.a} B = {this.state.b} C = {this.state.c} D = {this.state.d}/> : null
}

На самом деле эта кнопка находится в правой части div по горизонтали (слева есть некоторые поисковые фильтры, некоторые выпадающие списки и датчики), но я хочу сделать компонент данные под этим поисковыми фильтрами. Может кто-нибудь сказать мне, как этого добиться?

Answer 1

Примечание: Я предполагаю, что вы рендерили Button и NewComponent в одном месте, как в вашем фрагменте. Пожалуйста, поделитесь полным компонентом для лучшего понимания вашей проблемы.

Вы должны переместить NewComponent за пределы div, в котором есть все поисковые фильтры и кнопка.

...
<div>
  // ...search filters
  <Button variant="contained" color="primary" style={{marginLeft: 80 , marginTop: 
    35 , marginBottom: 10}}
   onClick={this._onButtonClick}
 >
   Search
 </Button>
</div>

{this.state.showComponent ?
   <NewComponent A = {this.state.a} B = {this.state.b}
   C = {this.state.c} D = {this.state.d}/> : null
}