i have an error in my console when i add a form login to my .JSX file, but i dont know where is the probelm exacly :

Here is my mode :

<section className="vh-100">
        <div className="container-fluid h-custom">
          <div className="row d-flex justify-content-center align-items-center h-100">
            <div className="col-md-9 col-lg-6 col-xl-5">
              <img
                src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.webp"
                className="img-fluid"
                alt="Sample image"
              />
            </div>
            <div className="col-md-8 col-lg-6 col-xl-4 offset-xl-1">
              <form onSubmit={handleSubmit}>
                <div className="divider d-flex align-items-center my-4">
                  <p className="text-center fw-bold mx-3 mb-0">
                    Connexion à l'application
                  </p>
                </div>

                <div className="form-group form-outline mb-4">
                  <input
                    type="email"
                    name="username"
                    id="username"
                    className={
                      "form-control form-control-lg"   (error && " is-invalid")
                    }
                    placeholder="Adresse email de connexion"
                    value={credentials.username}
                    onChange={handleChange}
                  />
                  <label className="form-label" htmlFor="username">
                    Adresse email
                  </label>
                  {error && <p className="invalid-feedback">{error}</p>}
                </div>

                <div className="form-outline mb-3">
                  <input
                    type="password"
                    name="password"
                    id="password"
                    className={
                      "form-control form-control-lg"   (error && " is-invalid")
                    }
                    placeholder="Mot de passe"
                    value={credentials.password}
                    onChange={handleChange}
                  />
                  <label className="form-label" htmlFor="password">
                    Mot de passe
                  </label>
                </div>

                <div className="d-flex justify-content-between align-items-center">
                  <div className="form-check mb-0">
                    <input
                      className="form-check-input me-2"
                      type="checkbox"
                      value=""
                      id="remeberMe"
                    />
                    <label className="form-check-label" htmlFor="remeberMe">
                      Souviens moi
                    </label>
                  </div>
                  <a href="#!" className="text-body">
                    Mot de passe oublié?
                  </a>
                </div>

                <div className="form-group text-center text-lg-start mt-4 pt-2">
                  <button
                    type="submit"
                    className="btn btn-primary btn-lg"
                    style="padding-left: 2.5rem; padding-right: 2.5rem;"
                  >
                    Je me connecte
                  </button>
                  <p className="small fw-bold mt-2 pt-1 mb-0">
                    Vous n'avez pas de compte ?{" "}
                    <a href="#" className="link-danger">
                      Inscription
                    </a>
                  </p>
                </div>
              </form>
            </div>
          </div>
        </div>
      </section>

here is all the errors in my console :

The above error occurred in the component: at button at div at form at div at div at div at section at LoginPage (http://localhost:8080/build/app.js:933:67) at Routes (http://localhost:8080/build/vendors-node_modules_axios_index_js-node_modules_core-js_modules_es_array_filter_js-node_modu-876774.js:63113:5) at main at Router (http://localhost:8080/build/vendors-node_modules_axios_index_js-node_modules_core-js_modules_es_array_filter_js-node_modu-876774.js:63047:15) at HashRouter (http://localhost:8080/build/vendors-node_modules_axios_index_js-node_modules_core-js_modules_es_array_filter_js-node_modu-876774.js:61920:5) at App

Uncaught Error: The style prop expects a mapping from style properties to values, not a string.

Thanks

CodePudding user response：

I think the problem is in the style tag in the submit button

Change this:

style="padding-left: 2.5rem; padding-right: 2.5rem;"

To this:

style={{ paddingLeft: "2.5rem", paddingRight: "2.5" }}

hope it helps ;)