Generating Bootstrap v3 alerts that can be easily dismissed while integrating error rendering with Redux-Form

I am currently working with redux-form (v6.5.0) and have the following source code:

class MyForm extends Component {
render() {
    const {error} = this.props
    return (
            <form>
                    <Field.....>
                    {this.renderError(error)}
            </form>
           );
}
renderError(error) {
    if (error) {
        var temp = error;
        return (
                <div className='alert alert-danger alert-dismissable'>
                <div className="close" data-dismiss="alert" aria-label="close">&times;</div>
                {temp}
                </div>
               );
    } else {
        return null
    }
}
}

While using this setup, I encountered an issue where the error message displayed as a bootstrap alert does not disappear when clicking on the x button. Can someone please advise me on what could be causing this issue?

I attempted to manually clear the error props but was unsuccessful. Does anyone have any suggestions on how to make bootstrap3 alerts work seamlessly with react/redux-form? Thank you.

Answer №1

Sending the stopSubmit action with an empty errors object will reset it

import {stopSubmit} from 'redux-form';
dispatch(stopSubmit('myFormName', {}))

Source of this solution on Github: https://github.com/erikras/redux-form/issues/2604#issuecomment-282670843

Encountered this issue myself. Couldn't find a simpler approach.

UPDATE: verified with "react-redux" v6.7.0

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJS ng-click function not functioning as expected when used within ng-repeat

The event.id is correctly displayed in the html text, but the function does not receive it properly. Even though it appears correctly in the source code, there seems to be an issue here. <span ng-repeat="event in [{"id":"dxczhlyvmblc","name":"4 on 4 - ...

Having trouble integrating custom inputs with Braintree, only the payment_method_nonce seems to be functioning correctly

I'm facing an issue where only the payment_method_nonce parameter passes to payment.php instead of all user inputs (first name, last name, contract number, amount) when using $result = Braintree_Transaction::sale. After testing payment.php with <?p ...

What is the best way to enable click functionality on the SVG Object and smoothly scroll to anchor using jQuery?

My SVG is embedded using an object tag and includes CSS3 hover animations. However, I am facing issues when trying to hyperlink the SVG with hover animation as it interferes with clicking actions. I chose not to use the long SVG path code for better code o ...

Task with Gulp: Utilizing Streams within a Loop

The objective is to read all the files stored in someFolder and inject them into a specific file using gulp-inject-string with an irrelevant condition for this context. Below is some pseudo code illustrating what I currently have: var gulp = require(&a ...

Is there a unique identifier associated with web explorers?

I'm conducting an experiment and I've noticed that Google is able to detect that it's the same computer, even when I change various settings. It seems to be identifying the explorer with a unique ID or something similar. I have tried everyth ...

The concept of undefined in JavaScript when an if condition is applied

In Node.js, there is a method used to handle API requests. An unusual behavior occurs when dealing with req.query.foo - even if it has a value defined, it becomes undefined when used in an if condition as shown below. Additionally, another req.query.foo ...

Unable to utilize container-fluid on Chrome and tablet-sized screen due to compatibility issues

By using the container-fluid class, I have created a header that spans the entire front page. While this setup functions perfectly on Opera, Firefox, and Microsoft Edge, it falls short on Chrome, iPad, and mobile phone screens. Take a look at my code: &l ...

Displaying a variable in a text box using the italicized format

Could you please share how to display a variable in a textbox using italics style? Appreciate your help! ...

Ways to prevent the navbar from disappearing when the Chrome browser is resized

I am looking to align the navbar lists, which are currently on the right side, below the header icon placed on the left side. Rather than toggling the navbar with a button, I want it to simply expand under the header icon. It seems that the disappearance ...

Error encountered: Invalid symbol detected ('<') while attempting to parse JSON in an Angular application

I am experiencing an issue with my Angular code when trying to submit a form. Upon clicking the submit button, an error saying JSON Parse error: Unrecognized token '<' appears, and empty records are being saved in the database. I have included ...

Hovering over the <li> element reveals that it does not have an appropriate size

I'm currently utilizing bootstrap and have come across this code snippet: <ul class="dropdown-menu scrollable-menu-brands" style="width:210px;"> {foreach $arr as $id => $r} <li><a class="dropdown-i ...

Filter the object by its unique identifier and locate the entry with the highest score

I'm currently working on figuring out the proper syntax for sorting an object by ID and then identifying the highest score within that ID array. While I've managed to sort the object up to this point using conditionals and the sort() method, I&ap ...

How can the front design of Material-UI's Card header be customized?

Currently, I am facing an issue with the Material-UI card header as the background color is affecting the readability of the default font. My aim is to use the typography prop h4 for the header, but I am struggling to achieve this. https://i.stack.imgur.c ...

Has bootstrap 4 reached a stable release? Or is it still undergoing development?

Hi there, I'm curious about the stability of Bootstrap 4. From what I've seen, it's still being actively developed with bug fixes happening as recently as this year. Would it be wise to use it on a live site with a large customer base, or sh ...

Is there a reason why Social Bar isn't appearing at the top?

My challenge is to position the bar close to the black footer. It appears correctly in Chrome, but not in Firefox and Opera. The screenshot shows how it looks in Chrome. However, in Firefox and Opera, the social bar is positioned lower and does not align ...

``Protect your PDF Document by Embedding it with the Option to Disable Printing, Saving, and

Currently, I am facing a challenge to enable users to view a PDF on a webpage without allowing them to download or print the document. Despite attempting different solutions like Iframe, embed, PDF security settings, and Adobe JavaScript, I have not been s ...

Unable to perform 'texImage2D' on 'WebGLRenderingContext'. Encounter an issue when generating canvas texture

My goal is to wrap text around the sleeve of a glTF shirt object, so I created a mesh on top of the sleeve using blender. I then added a canvas texture to the mesh and attempted to render text on it, but unfortunately, I encountered an error: https://i.ss ...

The filtering function does not provide any output

When working in JavaScript, I often find myself needing to filter a list of objects let dataid = infosStructured.filter(elm => { console.log(elm.identifiant); console.log("matching value", elm.identifiant == this.dataService.getcurrentId()); // Thi ...

Bootstrap Datepicker - dropup instead of dropdown

I'm a newcomer and have been struggling to set up the Bootstrap Datepicker. Whenever I try, all I see is the input field with the value "12-02-2013", but there's no dropdown menu when I click on it. Despite searching through various examples on ...

"Utilizing margins to create space between elements within a Bootstrap

I am currently utilizing bootstrap 4 and have a list of items that I am displaying in the following manner: <div class="container"> <div class="row"> <div class="card col-md-4 col-sm-6 col-12 item-wr" *ngFor="let item of items"> ...