Is it possible to apply styles to a dynamically generated div within a React component?

Question

Is it possible to apply styles to a dynamically generated div within a React component?

Within the realm of React, I find myself dealing with a component known as DivHelper. This particular component is tasked with generating two divs stacked vertically on top of each other. However, my desire is to have these divs positioned side by side. The challenge lies in the fact that I am unable to access the code responsible for generating the divs dynamically within DivHelper. Is it possible to gain access to these generated divs?

As an illustration:

///A snippet of arbitrary code

///Additional lines of code

Thus resulting in:

///A snippet of arbitrary code

<div>1 Div</div>

<div>2 Div</div>

///Additional lines of code

Subsequently leading to the output:

1 Div

2 Div

What I truly aim for is to have them placed side by side but reversed (similar to floating elements).

2 Div 1 Div

Is there a feasible way to achieve this?

javascript css reactjs flexbox jsx

Answer 1

Answer №1

Modifying the className of components dynamically in React allows for custom styling and layout options.

Here is an example:

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [display, setDisplay] = useState("row");

  const handleClick = () => {
    display === "row" ? setDisplay("column") : setDisplay("row");
  };

  return (
    <div className="App">
      <h1>Dynamic display</h1>
      <button onClick={() => handleClick()}>Change display</button>
      <div className={"container " + display}>
        <div className="square red">First div</div>
        <div className="square green">Second div</div>
      </div>
    </div>
  );
}

This code snippet can be styled using the following CSS:

.container {
  display: flex;
}
.row {
  flex-direction: row;
}

.column {
  flex-direction: column;
}
.square {
  background: "red";
  height: 100px;
  width: 100px;
}

.red {
  background: #f00;
}
.green {
  background: #0f0;
}

Answer 2

Modifying the className of components dynamically in React allows for custom styling and layout options.

Here is an example:

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [display, setDisplay] = useState("row");

  const handleClick = () => {
    display === "row" ? setDisplay("column") : setDisplay("row");
  };

  return (
    <div className="App">
      <h1>Dynamic display</h1>
      <button onClick={() => handleClick()}>Change display</button>
      <div className={"container " + display}>
        <div className="square red">First div</div>
        <div className="square green">Second div</div>
      </div>
    </div>
  );
}

This code snippet can be styled using the following CSS:

.container {
  display: flex;
}
.row {
  flex-direction: row;
}

.column {
  flex-direction: column;
}
.square {
  background: "red";
  height: 100px;
  width: 100px;
}

.red {
  background: #f00;
}
.green {
  background: #0f0;
}

Is it possible to apply styles to a dynamically generated div within a React component?

Answer №1

Similar questions

End the nodejs aws lambda function within a .then or .catch block

Turn off laptop camera to assess web application functionality in the absence of a camera on the device

Dynamic HTML contains a unique Angular attribute called 'ng-click' that is failing to trigger

What is the process for setting the action column as the last column in a Material UI table in ReactJs?

Combining an input box and label on a single line with the help of Bootstrap

What is the best way to modify the color of the active tab I have chosen?

Is it possible to maintain consistent numbering for ordered lists using only CSS, even when the lists are separate from each other?

Adjusting the size and style of the <textarea > dynamically

``Converting objects to key-value pairs in JavaScript like Scala's `toMap

Unresolved Issue: Jquery Modal Fails to Activate on Subsequent Click for Ajax-

Is there a way in JavaScript to track changes in CSS properties such as transitioning from "display:none" to "display:block"?

Adding a splash of color to a see-through image in the Yet-Another-React-Lightbox

Modify the row's background color after clicking the delete button with jquery

Having issues with the functionality of the Adobe PDF embed API in collaborative settings when using Reactjs

After an error occurs, the Node.js Restify code will be executed

Utilizing MUI5 breakpoints to enhance the responsiveness of my navigation bar

It appears that the NodeJs Express 4 async function in the model is returning before completion

"Unlocking the potential of Framework7 + Vue to seamlessly integrate footers into panels

The hyperlink element has been added but is not clickable

Using VUEJS to pass the value of a JavaScript button