Entering the 21-st Century by Learning React: Styling the Popup

16 Jul

Welcome back to the series of blog posts, where I try to learn React. You will see a lot of errors I make and, hopefully, learn too! Do you want to start from the beginning? Here’s where it all started: Entering the 21-st century: Learning React

What have we done so far?

Until now, we created a button, which creates a new “Log In” component under the header of our application. The component has two inputs and a button which, when clicked, prints out our username and password in plain text. Isn’t it marvelous!

One problem here is the fact, that our Log In form is somewhere far from the button that opens it. Who cares we announce the user’s password to the world?

What shall we do today?

I want the component to appear right below the button, wherever this button is. Perhaps fixing this problem goes through setting some styles to the component. Let’s see about that!

But first, let’s try to move the form closer to the button and see what happens.

Moving the pop-up close to the button

I say in the App component, we put the “logIn” div next to the button, instead of outside the header. Like this:

<div className="App">
  <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <p>
      Edit <code>src/App.js</code> and save to reload.
    </p>
    <button
      className="App-link"
      onClick={openLoginForm}
    >
      Log In
    </button>
    <div id="logIn"></div>
  </header>
</div>

Alright, Let’s see what we did!

When I click the button, the form shows up right below the button. I think we’re done here. No styles were needed. I’m very disappointed. I want to code some more! Hey, wait, I didn’t check what happens if I try to log in? Let’s see!

Does it still work, though?

Enter username, password, click the button, and … It doesn’t announce the password to the world anymore. Ladies and gentleman, we have our first bug!

I’m going to be debugging!

I’ll inspect the page structure. Right click and choose “Inspect” in the context menu.

Alright, it seems that on submit the log-in form gets removed from the DOM, but nothing gets rendered inside of it afterwards… Hm, let’s see what the console is shouting at me (The console is right next to the element inspector we used until now):

Line 14: Style prop value must be an object

It’s a warning, it can’t be the problem. Let’s try using the form and see what the console says:

The above error occured in the <div> component:

in div (at App.js:14)

Consider adding an error boundary to your tree to customize error handling behaviour.

Well, I don’t know what this error means, but it has the same line error like the warning above. I should probably pay attention to it. Let’s do what the warning suggests. Right now, line 14 looks like this:

<div style="position:relative;">

The warning says the style property needs an object. What should this object look like again? Let’s look at the console once more. There’s another error too! It says:

Uncaught Invariant Violation: The `style` prop expects a mapping from style properties to values, not a string. 
For example, style={{marginRight : spacing + 'em'}} when using JSX.

Good! Let’s fix that line then:

<div style={{position:'relative'}}>

This was easy. Wait, why do I have this at all? I fixed the positioning by moving the form altogether, I don’t need this. I’ll remove it. It was a good experience though.

What we’ve learned?

Alright, there wasn’t much to do today, but at least you know how to open the console. I’m sure you knew that before, but still.

What’s next?

Next time I’d like to make it possible to close this log-in form, without submitting it. There is a need for a close button on a popup, right? I’ll make one. Also, the console is shouting at me I change the state directly. We’ll look what’s that too.

Now, get back to work :P and,

Happy coding!

Still here?

If you are from the future, you can continue with the series by following this link: Entering the 21-st Century by Learning React: Closing the Popup

Perhaps you would like to read an older article? Here: Using Twitter Bootstrap’s Collapse plugin for non-standard problems in a micro article I explain a nice trick I did once with Bootstrap.

Or maybe you like a bit of system administration? Here: Can I move my boot partition? I describe how I tidied up my dual-boot system’s boot partition.