!!document.body.appendChild(canvas)thsi.state = {
visiblePopover: null,
}
handlerInput(number) {
(e)=>{
this.setState({visiblePopover: number});
}
}
render() {
data.map((item, i)=>{
return(
<div className="column">
<Input key={i} onClick={this.handlerInput(key)/>
{(thsi.state.visiblePopover===i) ? <Popover key={i} onClick={this.handlerInput(key)/> : null}
</div>
});//Можешь вместо null использовать style={{display: (thsi.state.visibleInput===i) ? "block" : "none"}}
}function Input({onClick, ...props}) {
/*
Чтобы не писать лишних переменных, и не вешать лишних обработчиков, в любом случае нужна была бы еще одна переменная
*/
if(onClick) {
let handlerClick=onClick;
onClick = (e)=>{
handlerClick(e);
}
}
return(
<div className="inputConteiner">
<input/>
<button onClick={onClick}/>
</div>
)
}store = {
isShowing: true,
}
.........................
// Код где-то в другом месте
renderInputs() {
// Можешь передать данные в аргумент и строить от них или все в render делать
retrun [<input/>,<input/>,<input/>,<input/>,<input/>];
}
render() {
<div className="input-block">
{(isShowing) ? this.renderInputs() : null}
</div>
}
// Закрывай dispatch передавая false для isShowing