The modal is simply there as a piece of presentation and also as a way of being able to update the parent component and you can think of it almost like a piece of middleware between the parent blog component and then the blog form.

The blog form is gonna take care of the form submission process. It's going to have all of the form elements, and then it is going to let our blog modal know, whenever the blog has been successfully created. The blog modal will then let the parent blog component know that a new record was created, and then it will get added directly onto the screen, so that you can see it instantly.

Now don't worry if that sounds a little bit fuzzy, we're gonna take it one step at a time, just like every other feature that we've built here. The goal for this guide is to simply create a blog form component so that when we click on new modal, instead of just having hard-coded values here, we actually have a form.

It's not gonna be functional yet, or anything like that, for right now we're just going to create the form and have it render. And this follows a pattern that you probably have noticed, and this is not just the way I teach, this is also the way I write code.

Whenever I'm building out my own applications, I do not try to build out a large piece of functionality, or some big feature all at one time. I used to do that when I was younger and it led to a lot of frustration. And the longer that I been developing, the more I really focused on building very small manageable pieces of code. I test early, I test often, and that way I do not get into kind of this loop of writing a lot of code and then having to go back and figure out when something doesn't work, and have to look at lines of code, or anything like that.

So to follow this example, instead of going and trying to create a functional blog form, we're first just gonna create a component, just a regular old component that is going to then give us the ability to call our API eventually, but for right now it's simply going to render a very basic form.

So let's test this out, let's go to our modal here, and we're going to eventually import it, but for right now let's actually go and create the file. So I have our components directory, our blog component's directory, or I should say our blog directory underneath that, and I'm going to add it here.

So I'm going to say blog-form.js. Now this is going to be a class-based component, 'cause it's going to have state, and I am gonna use my user snippet here. So I'm just going to call this BlogForm, we're not gonna add any state or anything like that right now.

Just for now let's just create the form itself. So instead of having a div here, I'm going to return a form. We're not gonna worry about the handlers or anything like that. Close it off so you have the opening form tag and the closing form tag.

And then inside of here, let's just add some inputs. So I'll say input, first one's gonna be of type text. And then let's add another one just so we can see a couple inputs there on the screen, and then let's add a submit button, we'll say Save. As you can see, none of this is functional, this simply all getting us to the point to make sure that we can see a rendered form in our modal.

blog-form.js

import React, { Component } from "react";

export default class BlogForm extends Component {
  render() {
    return (
      <form>
        <input type="text" />
        <input type="text" />

        <button>Save</button>
      </form>
    );
  }
}

So hit save, and then go to the blog-modal, and let's import it. So here at the top I'll say, import BlogForm from, and we're in the modal directory, so we're gonna jump back one directory, and then we're gonna go into the blog directory, and then we want the blog-form.

blog-modal.js

import BlogForm from "../blog/blog-form";

Now we can simply call this, so I'm gonna get rid of hi, I'm in a modal, and instead I'm gonna call the BlogForm component, hit save, and let's see if this is working.

render() {
  return (
    <ReactModal
      style={this.customStyles}
      onRequestClose={() => {
        this.props.handleModalClose();
      }}
      isOpen={this.props.modalIsOpen}
    >
      <BlogForm />
    </ReactModal>
  );
}

Switch to Google Chrome, click Open Modal, and you can see our form is there as both of our inputs, and our Save button.

So in this guide, we've created the beginning of our BlogForm component. We made sure that it rendered the different form elements that we're gonna use, or the first couple form elements we're going to use, and then we called that directly from within the modal.

Resources

• Source code