How to draw a border around a Bootstrap form in ReactJS?

Question

I'm new to JavaScript and ReactJS.

What do I want to get

I want to create a page with the following layout:

Mockup .

As you can see, both forms have a border around them. That's what I want to achieve (add a border to the sign-up form).

What I did to acheive the result

I created a simple NodeJS/React application according to this tutorial.

Then I defined the entry page (page that will contain both forms) like this:

import React, { Component } from 'react';
import { Button, Row, Col, Jumbotron } from 'react-bootstrap';
import SignUpForm from './SignUpForm';

class EntryPage extends Component {
  render() {
    return (
      <div>
        <Jumbotron>
          <h1>CTR Predictor</h1>
          <p>CTR Predictor allows you to automatically estimate the optimal price for keyword combinations used in search engine marketing campaigns.</p>
        </Jumbotron>
        <Row>
          <Col xs={6} md={3}><SignUpForm /></Col>
          <Col xs={6} md={6}>Place for the login form</Col>
        </Row>
      </div>
    )
  }
}

export default EntryPage;

SignUpForm is defined as follows.

import React, { Component } from 'react';
import { FormGroup, ControlLabel, FormControl, HelpBlock } from 'react-bootstrap';
import style from './style';

class SignUpForm extends Component {
  render() {
    return (
      <div class="signUpForm">
        <form>
          <FormGroup
            controlId="formBasicText"
          >
            <ControlLabel>Working example with validation</ControlLabel>
            <FormControl
              type="text"
              placeholder="Enter text"
              onChange={this.handleChange}
            />
            <FormControl.Feedback />
            <HelpBlock>Validation is based on string length.</HelpBlock>
          </FormGroup>
        </form>
      </div>
    )
  }
}

export default SignUpForm;

style.js is located in the same directory as the files above and contains this:

const style = {
  signUpForm: {
    border:'2px solid #000000',
  }
}

module.exports = style;

When I run the application, there is no border around the sign-up form.

Screenshot of the form without the border

What I tried to fix the error

I tried to add bsClass='signUpForm' (as suggested here) to the declaration of FormGroup in SignUpForm, but it didn't help.

How can I fix this error (make sure that the border around the form is displayed)?

You can use style={style. signUpForm} in your
.
– HuyTran Jul 27 '17 at 10:37 — HuyTran, Jul 27 '17 at 10:37

score 2 · Accepted Answer · answered Jul 27 '17 at 10:37

First I would change import of style, to this import {signUpForm} from ./style and this

  <div class="signUpForm">

change to this

  <div style={signUpForm}>

However important note, you are using react, therefore you cannot write class, react use className="name-of-class"

You are exporting style, not css, therefore you need to use it in style attribute not in className.

How to draw a border around a Bootstrap form in ReactJS?

1 Answers1