React-Redux with Bootstrap -- modal component

Question

I'm having hard time applying the concept between components vs containers using Bootstrap's modal in React-Redux.

Essentially, instead of re-creating specific modals, I'd like to create a React Component that holds a modal template.

To illustrate my example, here's a FCC project that I'd like to implement:

https://codepen.io/FreeCodeCamp/full/xVXWag/

The "Add Recipe" and "Edit" has the same component, yet when being called it is used by different containers (is this correct mindset?).

I have the following code in one of my container for "Add Recipe":

import React, { Component } from 'react';
import { Button, Modal } from 'react-bootstrap';
import { addRecipe } from '../actions/index';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';


class AddRecipeButton extends Component{
  constructor(props){
    super(props);
    this.state = {recipeName: '', userIngredients: '', showModal: false};
    this.close = this.close.bind(this);
    this.open = this.open.bind(this);
    this.onClickSubmit = this.onClickSubmit.bind(this);
    this.handleRecipeNameChange = this.handleRecipeNameChange.bind(this)
    this.handleUserIngredientsChange = this.handleUserIngredientsChange.bind(this)
  }
  close() {
    this.setState({ showModal: false, recipeName: '', userIngredients: '' });
  }
  open() {
    this.setState({ showModal: true });
  }
  onClickSubmit(){
    const splitIngredients = this.state.userIngredients.split(/[ ,]+/)
    this.props.addRecipe([this.state.recipeName, splitIngredients])
    this.setState({ showModal: false, recipeName: '', userIngredients: '' });
  }
  handleRecipeNameChange(event){
    this.setState({recipeName: event.target.value})
  }
  handleUserIngredientsChange(event){
    this.setState({userIngredients: event.target.value})
  }
  render(){
    const centerText = {
      textAlign : 'center'
    }
    return(
      <div>
        <Button
          bsStyle="success"
          onClick={this.open}
          >Add Recipe
        </Button>
        <Modal show={this.state.showModal} onHide={this.close}>
          <Modal.Header closeButton>
            <Modal.Title style={centerText}>Add Recipe</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <form>
              <div className="form-group">
                <label htmlFor="recipeName">Name of Recipe:</label>
                <input
                  value={this.state.recipeName}
                  onChange={this.handleRecipeNameChange}
                  type="text"
                  className="form-control"
                  id="recipeName" />
              </div>
              <div className="form-group">
                <label htmlFor="userIngredients">Ingredients:</label>
                <textarea
                  placeholder="you can seperate by comma"
                  onChange = {this.handleUserIngredientsChange}
                  value={this.state.userIngredients}
                  type="text"
                  className="form-control"
                  id="userIngredients" />
              </div>
            </form>

          </Modal.Body>
          <Modal.Footer>
            <Button
            bsStyle="info"
            onClick={this.onClickSubmit}>Add Recipe
            </Button> <Button
            bsStyle="danger"
            onClick={this.close}>Close
            </Button>
          </Modal.Footer>
        </Modal>
      </div>
    )
  }
}

function mapDispatchToProps(dispatch){
  return bindActionCreators({addRecipe}, dispatch)
}

export default connect(null,mapDispatchToProps)(AddRecipeButton)

Although this works, I can already tell that the render function should call a component that does the actual rendering of the modal instead.

I guess my question is how to create the modal component and keep track of the modal window state?

EDIT: Those who are curious, I was able to implement what it worked for me.

Modal Component:

import React, { Component } from 'react'
import { Button, Modal } from 'react-bootstrap';

export default (props) => {
  return (
    <Modal show={props.showModal} onHide={props.toggleModal}>
      <Modal.Header closeButton>
        <Modal.Title>{props.title}</Modal.Title>
      </Modal.Header>
      <Modal.Body>
      <form>
        <div className="form-group">
          <label htmlFor="recipeName">Name of Recipe:</label>
          <input
            value={props.recipeName}
            onChange={props.handleRecipeNameChange}
            type="text"
            className="form-control"
            id="recipeName" />
        </div>
        <div className="form-group">
          <label htmlFor="userIngredients">Ingredients:</label>
          <textarea
            placeholder="you can seperate by comma"
            onChange = {props.handleUserIngredientsChange}
            value={props.userIngredients}
            type="text"
            className="form-control"
            id="userIngredients" />
        </div>
      </form>
      </Modal.Body>
      <Modal.Footer>
        <Button
        bsStyle="info"
        onClick={props.onClickSubmit}>Add Recipe
        </Button> <Button
        bsStyle="danger"
        onClick={props.toggleModal}>Close
        </Button>
      </Modal.Footer>
    </Modal>
  )
}

Add Recipe Button Container (smart component)

import React, { Component } from 'react';
import { Button, Modal } from 'react-bootstrap';
import { addRecipe } from '../actions/index';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import MyModal from '../components/mymodal';

class AddRecipeButton extends Component{
  constructor(props){
    super(props);
    this.state = {
      recipeName: '',
      userIngredients: '',
      showModal: false
    };

    this.onClickSubmit = this.onClickSubmit.bind(this);
    this.handleRecipeNameChange = this.handleRecipeNameChange.bind(this)
    this.handleUserIngredientsChange = this.handleUserIngredientsChange.bind(this)
    this.toggleModal = this.toggleModal.bind(this);
  }
  toggleModal(){
    this.setState({
        showModal: !this.state.showModal
    });
  }
  onClickSubmit(){
    const splitIngredients = this.state.userIngredients.split(/[ ,]+/)
    this.props.addRecipe([this.state.recipeName, splitIngredients])
    this.toggleModal()
  }
  handleRecipeNameChange(event){
    this.setState({recipeName: event.target.value})
  }
  handleUserIngredientsChange(event){
    this.setState({userIngredients: event.target.value})
  }
  render(){
    return (
      <div>
        <Button
          bsStyle="success"
          onClick={this.toggleModal}
          >Add Recipe
        </Button>
        <MyModal
          toggleModal={this.toggleModal}
          showModal={this.state.showModal}
          recipeName={this.state.recipeName}
          userIngredients={this.state.userIngredients}
          handleRecipeNameChange={this.handleRecipeNameChange}
          handleUserIngredientsChange={this.handleUserIngredientsChange}
          onClickSubmit={this.onClickSubmit}
        />
      </div>

    )
  }
}

function mapDispatchToProps(dispatch){
  return bindActionCreators({addRecipe}, dispatch)
}

export default connect(null,mapDispatchToProps)(AddRecipeButton)

Answer 1

Something like this would work (kind of a quick job but you get the idea..?)

// Create a React component for your modal:

var MyModal = React.createClass({
    render: function() {
        return (
         <Modal onHide={this.props.handleToggle}>
          <Modal.Header closeButton>
            <Modal.Title style={centerText}>Add Recipe</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <form>
              <div className="form-group">
                <label htmlFor="recipeName">Name of Recipe:</label>
                <input
                  value={this.props.recipeName}
                  onChange={this.props.handleRecipeNameChange}
                  type="text"
                  className="form-control"
                  id="recipeName" />
              </div>
              <div className="form-group">
                <label htmlFor="userIngredients">Ingredients:</label>
                <textarea
                  placeholder="you can seperate by comma"
                  onChange = {this.props.handleUserIngredientsChange}
                  value={this.props.userIngredients}
                  type="text"
                  className="form-control"
                  id="userIngredients" />
              </div>
            </form>
          </Modal.Body>
          <Modal.Footer>
            <Button
            bsStyle="info"
            onClick={this.props.onClickSubmit}>Add Recipe
            </Button> <Button
            bsStyle="danger"
            onClick={this.props.handleToggle}>Close
            </Button>
          </Modal.Footer>
        )
    }
});

// Return modal in render function and pass parent components state and functions down through props:

var AddRecipeButton = React.createClass({
  getInitialState: function() {
    return {
        isModalOpen: false,
        recipeName: '',
        userIngredients: ''
    };
  },
  toggleModal: function() {
    this.setState({
        isModalOpen: !this.state.isModalOpen
    });
  },
  onClickSubmit(){
    const splitIngredients = this.state.userIngredients.split(/[ ,]+/)
    this.props.addRecipe([this.state.recipeName, splitIngredients])
    this.toggleModal();
  },
  handleRecipeNameChange(event){
    this.setState({recipeName: event.target.value})
  },
  handleUserIngredientsChange(event){
    this.setState({userIngredients: event.target.value})
  },
  renderModal: function() {
    if (this.state.isModalOpen) {
        return 
        <MyModal
            toggleModal={this.toggleModal}
            onClickSubmit={this.onClickSubmit}
            handleRecipeNameChange={this.handleRecipeNameChange}
            handleUserIngredientsChange={this.handleUserIngredientsChange}
        />;
    }
  },
  render: function() {
    {this.renderModal()}
  }
});