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

Use ng-class in a P tag to assess a variety of expressions

Is there a way to apply ng-class to automatically evaluate negative values within a < p > tag? <p <strong>LW$:</strong> {{d.lw_metric}} <strong>LW:</strong> {{d.lw_metric_percentage}} <strong>L4W:</strong> {{d.l ...

Image Handpicked by JCrop User

Successfully implemented JCrop example code for selecting an area on an image with a preview and getting coordinates. However, the challenge lies in allowing users to select an image from their file system, display it in the browser, and perform the afore ...

Using jQuery to eliminate the 'disabled' attribute from CSS

After using the .val() method to enter data into a text box, I noticed that when trying to click "add", the button appears disabled. <input class="btn-primary action-submit" type="submit" value="Add" disabled=""> If I manually type in text, the dis ...

What could be causing this Ajax error I'm experiencing?

I am attempting to dynamically load pages on this website using JQuery and Ajax when a menu point is clicked. However, I am encountering errors during the loading process. What does the console message ""GET 'path to css file'" mean? (there ...

Numerous Material-UI Tooltip components that can be individually opened and closed with a click within a list

Looking for a solution: I'm working on a react component that contains a list of products. Each product has specific information that needs to be displayed in a tooltip when clicked. If you have any suggestions or solutions, please check out my code ...

Is there a way to prevent the back button from functioning in my web browser?

How can I prevent the back button from being used on my webpage? Can you provide a list of possible methods to achieve this? if($data->num_rows > 0){ while($row = $data->fetch_assoc()){ header('Location:../cashier.php&apo ...

Retrieve: proper authentication credentials were not provided

Whenever I make a request, everything works fine and I receive the data: const get_players = async()=>{ const response = await fetch('http://127.0.0.1:8000/player_stats/api/players/') const data = await response.json() console. ...

How to exclude the port number from the href in a Node.js EJS template?

I have the following code snippet. I am trying to list out the file names in a specific directory and add an href tag to them. The code seems to be working fine, however, it still includes the port number where my node.js app is running. How can I remove ...

A guide to implementing react-hook-form in conjunction with form actions

Having trouble with this code as it's not performing validation upon submission? The login process is coded here using Zod for validation and React Hook Form for managing the form. However, the validation seems to be skipping, leading to a direct call ...

When attempting to update a database, the Jquery ajax response is not being reflected

Currently, I am utilizing a dialog box for updating my database and removing services. However, I have encountered an issue where it only functions properly on the initial "remove" click. When I open the dialog box, I am presented with a list of 5 servic ...

What causes the vuetify tag not to render as HTML in the browser?

I ran into a styling issue while using Vuetify in my Nuxt 2 project. Upon inspecting the element in dev tools, I noticed that some Vuetify tags were not being converted to HTML as expected (they were displayed as div class="tag_name"). These unco ...

A guide to presenting array data retrieved from an Ajax call within HTML using Laravel 4.1

I have an AJAX call to a controller that returns array data to my view. I want to display this array data in HTML upon clicking, but I'm not sure how to do it yet. Here's what I have so far: AJAX Call: request = $.ajax({ url: "/fans/ ...

Utilize a combination of filters within a Redux action

Is it possible to implement multiple filters in a Redux action? I am looking to filter based on four fields: name, entity, status, and value. case SEARCH_ALERTS: return { ...state, alertList: state.alertList.filter(item => item. ...

Compiling SCSS to CSS in Vue.js is a breeze

I am working on a vue js project that includes scss files. My goal is to compile these scss files into css and store them in the public folder. How can I achieve this? Should I make changes to the vue.config.js file? const path = require('path'); ...

Store the content of an HTML div using HTML5 Drag and Drop functionality in a MYSQL database

Here's a simple scenario: I have 3 small divs (1, 2, 3) and I want to place them inside 3 other divs (4, 5, 6). That's no issue, but then I need to store the data in MySQL, such as 4-1, 5-2, 6-3 for instance. I can use JavaScript to display the n ...

selenium-webdriver causing issues on a nodejs server

Encountering an error while trying to start the nodejs server with selenium webdriver ubuntu@ip-10-10-10-193:~/testenvoy$ node app.js /home/ubuntu/testenvoy/node_modules/selenium-webdriver/index.js:115 static createSession(...args) {} ...

Tips for sending a Json array to a servlet

[DUPICATE] Here is the JSON code I am using for my POST request: var data_create = JSON.stringify($("#form_create_delegate").serializeArray()); alert("data_create content" + data_create); // console.log(data_create) $.ajax({ ...

The code is running just fine when tested locally, but it seems to encounter an issue when accessed remotely, yielding

Currently, I am in the process of developing a dual twin setup using a Raspberry Pi. The goal is to simulate a continuous transmission of body temperature data, which is then sent to a server that stores the information in a MongoDB database. Everything fu ...

Displaying a video in fullscreen on a webpage

Struggling to achieve the desired result, seeking advice from experts. Looking to create a classic example like this: http://codepen.io/anon/pen/rWwaRE But want it embedded within blocks of text and possibly triggered by scrolling over it similar to this ...

Is there a way to customize the checkout page using JavaScript?

I'm working on a checkout page where fields need to change based on a selected radio button. There are two options: A and B. When A is selected, I want certain fields to remain visible while others disappear, and vice versa for option B. Although I p ...