Home / Questions / 278047
Accepted
Ceci Benitez
Asked: 2020-07-11 09:04:05 +0800 CST 2020-07-11 09:04:05 +0800 CST

Why doesn't my save button work if the image field is optional?

  • 772

I am making the front of an application in React and when adding images the save button MOvieFormstopped working even though I made the image field optional. I also have an array of images where the method saveMovie(movie)to save the movies is and I use it but it is not working for me I realize why when I press the save button the page should redirect me to /movies and save the new movie but it is not doing so .

import React from "react";
import Joi from "joi-browser";
import Form from "./common/form";
import { getMovie, saveMovie } from "../services/fakeMovieService";
import { getGenres } from "../services/fakeGenreService";

class MovieForm extends Form {
    state = {  
        data: {
            title: "",
            genreId: "",
            numberInStock: "",
            dailyRentalRate: "",
            img: ""
          },
          genres: [],
          errors: {}
    }

    schema = {
        _id: Joi.string(),
        title: Joi.string()
          .required()
          .label("Title"),
        genreId: Joi.string()
          .required()
          .label("Genre"),
        numberInStock: Joi.number()
          .required()
          .min(0)
          .max(100)
          .label("Number in Stock"),
        dailyRentalRate: Joi.number()
          .required()
          .min(0)
          .max(10)
          .label("Daily Rental Rate"),
        img: Joi.string().allow('').optional()
    }

    componentDidMount() {
        const genres = getGenres();
        this.setState({ genres });
    
        const movieId = this.props.match.params.id;
        if (movieId === "new") return;
    
        const movie = getMovie(movieId);
        if (!movie) return this.props.history.replace("/not-found");
    
        this.setState({ data: this.mapToViewModel(movie) });
    }
    
      mapToViewModel(movie) {
        return {
          _id: movie._id,
          title: movie.title,
          genreId: movie.genre._id,
          numberInStock: movie.numberInStock,
          dailyRentalRate: movie.dailyRentalRate,
          img: movie.img
        };
    }
    
      doSubmit = () => {
        saveMovie(this.state.data);
        this.props.history.push("/movies");
    }

    render() { 
        return ( 
            <div className = "container">
              <div className = "height"></div>
              <div className = "card card-login card-hidden">
              <div className = "card-header card-header-primary text-center">
                <h4>Movie Form</h4>
              </div>
        <form onSubmit={this.handleSubmit}>
          <div className = "card-body text-center p-4">
          {this.renderInput("title", "Title")}
          {this.renderSelect("genreId", "Genre", this.state.genres)}
          {this.renderInput("numberInStock", "Number in Stock", "number")}
          {this.renderInput("dailyRentalRate", "Rate")}
          {this.renderButton("Save")}
          </div>
        </form>
      </div>
            </div>
         );
    }
}
 
export default MovieForm;

This is my arrangement of movies, here you can take a look at the method saveMovie(movie)because surely something is missing there, the arrangement is very long, better I show you only the save method.

export function saveMovie(movie) {
  let movieInDb = movies.find(m => m._id === movie._id) || {};
  movieInDb.title = movie.title;
  movieInDb.genre = genresAPI.genres.find(g => g._id === movie.genreId);
  movieInDb.numberInStock = movie.numberInStock;
  movieInDb.dailyRentalRate = movie.dailyRentalRate;
  movieInDb.img = movie.img;

  if (!movieInDb._id) {
    movieInDb._id = Date.now().toString();
    movies.push(movieInDb);
  }

  return movieInDb;
}

javascript

1 Answers

  1. Best Answer

    It already seemed to me that there was something strange with the button and not with the method because it did not show any errors, it turns out that I had the type of the button set to buttonbut it should be submit, this is clear in form.jsx that I do not show here but I have in my project , sorry it was a stupid mistake since the component MovieFormrenders a form.

      renderButton(label) {
      return (
      <button 
      type="submit"
      disabled = {this.validate()}
      className="btn btn-primary">{label}
      </button>
      );
    }

    • 0