Modal windows are nice to have when you are creating CRUD applications. We will create a simple shopping list app where users can add new items using the modal window. The modal window component that we will use in the example is react-skylight (https://marcio.github.io/react-skylight/):

1. Create a new React app called shoppinglist and install react-skylight by using the following command:

      npm install react-skylight --save

2. Open the app folder with the VS Code and open the App.js file in the code editor. In the App.js component, we need only one state to keep shopping list items. One shopping list item contains two fields—product and amount. We also need a method to add new items to the list. The following is the source code of the constructor and the method for adding new items to the list. In the addItem method, we are using a spread notation (...), which is used to add a new item at the beginning of the existing array:

      constructor(props) {
        super(props);
        this.state={ items: [] };
      }

      addItem = (item) => {
        this.setState({items: [item, ...this.state.items]});
      }

3. Add a new component for adding shopping items. Create a new file called AddItem.js to the root folder of the app. This component will use the React Skylight modal form so let's import react-skylight. Inside the React Skylight component in the render() method, we will add two input fields (product and amount) and a button that calls the addItem function. To be able to call the addItem function that is in the App.js component, we have to pass it in a prop when rendering the AddItem component. Outside the React Skylight component, we will add a button that opens the modal form when it is pressed. This button is the only visible element when the component is rendered initially and it calls the React Skylight show() method to open the modal form. We also have to handle the change event of the input fields, so that we can access the values that have been typed. When the button inside the modal form is clicked, the addItem function is called and the modal form is closed using the React Skylight hide() method. The function creates an object from the input field values and calls the App.js component's addItem function, which finally add a new item to the state array and re-renders the user interface:

import React, { Component } from 'react';
import SkyLight from 'react-skylight';

class AddItem extends Component {
  constructor(props) {
    super(props);
  }
  
  // Create new shopping item and calls addItem function. 
  // Finally close the modal form
  addItem = () => {
    const item = {product: this.state.product,
     amount: this.state.amount};
    this.props.additem(item);
    this.addform.hide();
  }

  handleChange = (e) => {
    this.setState({[e.target.name]: e.target.value});
  }
 
  render() {
    return (
      <div>
        <section>
          <button onClick={() => this.addform.show()}>Add
           Item</button>
        </section>
        <SkyLight 
          hideOnOverlayClicked 
          ref={ref => this.addform = ref} 
          title="Add item">
          <input type="text" name="product"
           onChange={this.handleChange} 
           placeholder="product" /><br/>
          <input type="text" name="amount"
           onChange={this.handleChange} 
           placeholder="amount" /><br/>
          <button onClick={this.addItem}>Add</button>
        </SkyLight> 
      </div>
    );
  }
}

export default AddItem;

4. Modify the render() method in the App.js file. Add the AddItem component to the render() method and pass the addItem function in a prop to the AddItem component. At the beginning of the method, we transform items to listItems (<li></li>) using the map function:

// App.js
render() {
  const listItems = this.state.items.map((item, index) => 
    <li key={index}>{item.product} {item.amount}</li>)

  return (
    <div className="App">
      <h2>Shopping list</h2>
      <AddItem additem={this.addItem}/>
      <ul>{listItems}</ul>
    </div>
  );
}

When you now open the app, you will see an empty list and a button to add new items:

When you press the Add Item button, the modal form opens:

Type some values into the input boxes and press the Add button. The modal form is closed and the new item can be seen in the list: