Estoy intentando dar una funcionalidad (la de un pop-up/modal) a un botón determinado. Estoy usando la librería UI evergreen, y este es el código que utilizan:
<Component initialState={{ isShown: false }}>
{({ state, setState }) => (
<Pane>
<Dialog
isShown={state.isShown}
title="Danger intent"
intent="danger"
onCloseComplete={() => setState({ isShown: false })}
confirmLabel="Delete Something"
>
Dialog content
</Dialog>
<Button onClick={() => setState({ isShown: true })}>Show Dialog</Button>
</Pane>
)}
</Component>
Dice que el <Component />
obviamente no es parte de la librería. Entonces imagino que yo lo tengo que sustituir por el Componente donde se encuentra mi botón al que le quiero dar la siguiente funcionalidad:
class NavBar extends React.Component{
constructor(props){
super(props);
this.state = {isShown: false}
}
render(){
return (
<div>
<nav>
<div class="nav-container">
<div class="logo-container">
<img width="48px" height="48px" src={logoMuntrain} alt="logo" />
<a class="logo" >Muntrain</a>
</div>
<div class="tiempo-container">
{/**Botón Atrás start: */ }
<Pane>
<Dialog
isShown={state.isShown}
title="Danger intent"
intent="danger"
onCloseComplete={() => setState({ isShown: false })}
confirmLabel="Delete Something"
>
Dialog content
</Dialog>
<Button onClick={() => setState({ isShown: true })}>Show Dialog</Button>
</Pane>
)}
{/** Botón Atrás fin*/ }
</div>
</div>
</nav>
</div>
)
}
}
He convertido NavBar que era una simple funcion a un React.Component para ponerle "estado", pero no estoy muy bien seguro como funciona. Realmente no entiendo que es lo que hace "initialState" en el código boilerplate que veo de la librería dicha.
Los errores que me lanza:
Line 26: 'state' is not defined no-undef
Line 29: 'setState' is not defined no-undef
Line 35: 'setState' is not defined no-undef