Estoy creando un modal en React que permitirá a los usuarios agregar un elemento a una tabla. Creo un componente RecipeModal con un formulario dentro y no recibo errores al compilar, pero no sucede nada cuando hago clic en el botón. Seguí un tutorial muy de cerca y me he quedado sin ideas. He visto personas que tienen problemas con 'fade' en React que hace que el modal sea completamente claro y, por lo tanto, invisible, pero intenté verificar en "Inspect" (¿DevTools? No estoy seguro de cómo se llama) para 'modal' y no lo vi allí. Soy muy nuevo en el desarrollo web, así que avíseme si debo adjuntar algo más. Tenía más campos de entrada, pero los eliminé mientras intentaba solucionar este problema.

import React, { Component } from 'react';
import { Button, Modal, ModalHeader, ModalBody, Form, FormGroup, Label, Input } from 'reactstrap';

import { connect } from 'react-redux';
import { addRecipe } from '../action/recipeActions';

class RecipeModal extends Component {

  state = {
    modal: false,
    recipe_name: '',
    recipe_description: '',
    recipe_ingredients: '',
    recipe_steps: ''
  }
  toggle = (e) => {
    this.setState({
      modal: !this.state.modal
    });
  }
  onChange = (e) => {
    this.setState(
      { [e.target.recipe_name]: e.target.value }
    );
  }

  render() {

    return (
      <div>
        <Button
          color="dark"
          style={{ marginBotton: '2rem' }}
          onClick={this.toggle}
        >Add Recipe</Button>

        <Modal
          isOpen={this.state.Modal}
          toggle={this.toggle} >
          <ModalHeader toggle={this.toggle}>Add a New Recipe</ModalHeader>
          <ModalBody>
            <Form onSubmit={this.onSubmit}>
              <FormGroup>
                <Label for="recipe">Recipe</Label>
                <Input
                  type="text"
                  recipe_name="recipe_name"
                  id="recipe"
                  placeholder="Add recipe name"
                  OnChange={this.onChange} />

              </FormGroup>
            </Form>
          </ModalBody>
        </Modal>
      </div>
    );
  }
}

export default connect()(RecipeModal);
0
1101101 23 ago. 2020 a las 06:36

1 respuesta

La mejor respuesta

El estado distingue entre mayúsculas y minúsculas. Entonces, o cambia el nombre de su estado modal a Modal

state = {
  Modal: false,
  ...
};

o refactorice el accesorio isOpen a <Modal isOpen={this.state.modal} toggle={this.toggle}>

Sugiero lo último.

1
95faf8e76605e973 23 ago. 2020 a las 03:49