Newbe Dev Stack

Answer : It is obviously possible to use react-bootstrap in a nextjs application. The only problem you might encounter will be in the rendering of your application if javascript is disabled in user's browser if you use react-bootstrap components to build your layout (see example below). Nextjs allows you to display SSG/SSR pages, javascript-disabled users will see your app but the layout will be messy. But if you still want to go with it: npm i react-bootstrap bootstrap Import bootstrap styles in your _app.js: import 'bootstrap/dist/css/bootstrap.min.css'; You can then use your react-bootstrap components as you would do in reactjs: import {Container, Row, Col} from 'react-bootstrap'; const Layout = () => ( <> <Container fluid> <Row> <Col> <p>Yay, it's fluid!</p> </Col> </Row> </Container> </> ); export default Layout; Yes...

Answer : Use state and conditional rendering. Instead of returning a component set state to a variable, in your render use conditional rendering to check if the value is true. handleSubmit = (formState, { resetForm }) => { // Now, you're getting form state here! const payload = { ...formState, role: formState.role.value, createdAt: firebase.firestore.FieldValue.serverTimestamp() }; console.log('formvalues', payload); fsDB .collection('register') .add(payload) .then(docRef => { resetForm(initialValues); }) .then(e => this.setState({ alert: true })) .catch(error => { console.error('Error adding document: ', error); }); }; In your render render() { ... return( .... {this.state.alert && <AlertDismissible />} ... ) } Example Demo Complete form import React from 'react'; import { Link } from 'react-router-dom'; import { Formik, Form, F...