Troubleshooting: ReactJS CSS Class Issue

I'm fairly new to working with ReactJS and I've encountered an issue while trying to create a class for a specific form.

Below is the code I've written:

import React, { Component, PropTypes } from 'react';
import s from './style.scss';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import { Grid, Row, Col } from 'react-bem-grid';

class OrderDetails extends Component {
  render() {
      return (
          <div>
            <Row>
              <form class="orderform">
                <h3>Product Details: </h3>
                  <Row>
                    <Col xs={5}>
                      Product: <br />
                      Category: <br />
                      Sub Category: <br />
                      Price: <br />
                      Color: <br />
                      Breakdown: 
                    </Col>
                    <Col xs={4}>
                      test
                    </Col>
                  </Row>
                <h3>Print Details</h3>
                  <Row>
                    <Col xs={5}>
                      Print Method: <br />
                      Position:   <br />
                      Length:   <br />
                      Width:  <br />
                      Colors
                    </Col>
                  </Row>
              </form>
            </Row>
          </div>
     );
  }
}

export default withStyles(OrderDetails, s);

Additionally, here's the code from my style.css file:

.orderform{
    color: red;
}

Despite this simple code, I'm perplexed as to why it's not functioning correctly. Any advice on how to effectively utilize class CSS in ReactJS would be greatly appreciated!

Answer №1

Swap it out

return (
      <div>
        <Row>
          <form className="orderform">

As JSX uses className not class, as mentioned in the official documentation

Since JSX is JavaScript, identifiers such as class and for are not recommended as XML attribute names. Instead, React DOM components prefer DOM property names like className and htmlFor, respectively.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having difficulty accessing a public array item within chained AXIO transactions in VUE

I am currently facing an issue with a chained AXIOS call that is triggered from an array. The challenge I am encountering is ensuring that the second call completes before the first one initiates another API request, which seems to be working fine so far. ...

Achieving targeted text display on specific viewports using the visible class in Bootstrap

I've recently delved into learning Bootstrap, and I'm experimenting with creating a responsive page where certain divs will only be visible on specific viewports. I used classes like visible-xs, visible-sm, visible-md, and visible-lg for the diff ...

How can I assign global classes to material-ui components in ReactJs?

I have defined some global classes for fonts and colors, but I am unable to apply these classes within material-ui Typography. I am using the material-ui library available at: https://material-ui.com/ Below is the code snippet: <Typography className={ ...

When attempting to navigate to a new route with a query, I encounter the error message "NavigationDuplicated: Avoided redundant navigation to current location."

I'm facing an issue with my navigation header setup. It includes a search bar that redirects users to the home view with the search query as a parameter. Here's the code snippet for reference: <template lang="html"> <div cl ...

Launching an image link within the same location on the subsequent page to which it is directed

I'm completely new to creating websites so I may not be using the correct terminology. I've searched with various terms and ideas but haven't found any solutions to help me ask my question effectively or find examples of what I'm lookin ...

The code, which is the same, placed in a different location on another page - fails to function

On the index.php page, I have successfully implemented the following code snippet at the bottom: <script type='text/javascript'> $("#tbAlegro").click(function() { window.location = 'alegro.php'; }); </script> However, ...

Sending data from parent component to change MUI Button color (React with typescript)

Recently, I've been integrating MUI (v5) into a create-React-App with typescript. I have a custom theme set up as well. My goal is to develop a MyButton Component that accepts a buttonType prop (of type string), which corresponds to my theme.palette, ...

The page name is not appearing in the URL when using ReactJS router

I have implemented React Router as shown below: <BrowserRouter> <Switch> <Route exact path="/" component={Login} /> <Route exact path="/home" component={HomeComponent}/> </Switch> </BrowserRouter> ...

Exploring the JSON data received from PHP script via jQuery AJAX

In my program, I have created a web page with 5 radio buttons for selection. The goal is to change the picture displayed below the buttons each time a different button is chosen. However, I am encountering an issue during the JSON decoding phase after rec ...

Obtain the final array within an array composed of multiple arrays

My dilemma involves working with a dynamically generated array, where I need to extract only the values from the last array for aggregation purposes, discarding all others. Imagine a structure similar to this: let target = [] let data = [ [ { name: &apo ...

"Unexpected behavior: NextAuth is failing to return defined custom scopes

I am currently working on a NextJS project that utilizes NextAuth. Initially, everything was functioning properly with the default scopes. However, my project now requires additional claims, which are listed in the supported scopes here. "scopes_supporte ...

Import HTML document into a Bootstrap Popup

Currently, I am working on creating a modal that loads content dynamically. Below is the JavaScript code I have been using for this task: function track(id,title) { $('#listenTrack').modal('show'); $('#listenTrack').f ...

Managing User Sessions in Meteor

Is there a way to dynamically retrieve and set the pageTitle for my Meteor app using jQuery or any other method? I've attempted to achieve this by creating a session when a specific div class is present on the page, but it doesn't seem to be work ...

Tips for decreasing the space between elements in flexbox using justify-content: space-between

I'm in the process of creating a footer for my website and I've decided to utilize flexbox for the layout. Below is the CSS code I am using for my footer: .footer { display: flex; flex-direction: row; align-items: center; justify-content ...

Utilize the dynamic duo of GridLayout and ScrollView within the Famo.us JS framework

I'm attempting to incorporate a grid layout into a scroll view using famo.us (with angular), and the most straightforward approach seems to be working. <fa-view> <fa-scroll-view fa-pipe-from="eventHandler" fa-options="scrollView"> ...

What is the best way to locate the closest element using JavaScript?

Is there a way to locate the closest object to the mouse pointer on a webpage? I have a hypothesis that involves utilizing the array function, however, I am uncertain if that is the correct approach. Furthermore, I lack knowledge of which specific proper ...

Why isn't changing the property of a Sequelize instance having any effect?

While I've successfully used the standard instance syntax in the past, I'm facing a challenge with updating an instance retrieved from the database in this specific section of my code. ... const userInstance = await db.models.Users.findOne({wher ...

The compilation of SCSS CSS is encountering an error with the provided CSS code

Upon compiling SCSS, I encountered an error with the following CSS: span.icon-hcp { filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='../images/icon-hc.jpg', sizingMethod='scale') !important; -ms-filter: ...

Incorporate a Background Image, which is linked to a website URL, by utilizing an external CSS file within

I am struggling to incorporate an external CSS file (specifically a background image from a URL) into my HTML document. I have successfully applied internal CSS, so the issue is not with the website link. Despite reviewing similar posts addressing comparab ...

Navigating React: Learn the ins and outs of accessing and modifying state/attributes from a different component

Looking to update the attribute values of ComponentB from ComponentA (currently using an index). I attempted to call lower component functions to modify their state/values. import React from 'react' class TaskComp extends React.Component{ ...