DP_ DP_ - 1 year ago 129
React JSX Question

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

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)?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download