Alejandro Alejandro - 3 months ago 143
React JSX Question

React-Redux with Bootstrap -- modal component

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

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()}
  }
});
Comments