Unable to retrieve and manipulate CSS in React js - html

Question

In my project i'm trying to get the current css style applied to a div element, but since React.js is a virtual DOM, accessing DOM elements is not the same as if compared to pure Html and CSS. So, after accessing it i will modify it by using JS. For instance: if the current CSS color of a <h1>Title in red</h1> is red, i want to alter it via JS to <h1>Title in blue</h1> . I've tried by using
const elem = document.getElementByClassName("title");
const color = window.getComputedStyle(elem).getPropertyValue('color');
but null is returned...
This is the Component file:
import React, { Component } from 'react';
import '../../src/index.css';
class GridItems extends Component {
render() {
return (
<div className="wrapper">
<h1 className="title">Some random content 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
)
}
}
export default GridItems;
And the CSS one:
.title{color: red; text-align: center;}
.content{font-size: 16px;}
Help is appreciated, thanks!

Answer 1

You should definitely not be using vanilla javascript while using ReactJS, since then you are not using all the benefits about the library itself.
I.E, if you want to change that color based on some condition or something, you could have a state in the component like:
this.state = {
titleColor: "red"
}
And in your h1 element, you can have a style prop that applies styling to DOM elements
(ref here) like this:
<h1 className="title" style={{color: this.state.titleColor}}>Some random content 1</h1>
Obviously that will keep the red color in every moment. So you could create a button that onClick (another widely used prop in React) sets the value of the state titleColor to another color causing a re-render and changing the color to the new one

Answer 2

This article from react's official website could be useful.
Using the React.createRef() function you can access 'refs', which you can think of like "wrappers" of DOM elements (and also components, when called on them) generated by react. Once you have the ref, you can acces the DOM element using the current property:
const node = this.myRef.current;
It must be used inside the constructor of the component. The common practice is to store this 'ref' into some property of the component and then pass it as a prop in the render method. This example is from the react website:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={this.myRef} />;
}
}
As metioned in the article:
You may not use the ref attribute on function components because they don’t have instances
You may also want to check out this article. It talks about integrating react with other libraries. From this article:
React is unaware of changes made to the DOM outside of React. It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover.
As a last advice, i'd recommend you do what #Agustin says: use state and pass this state to the style prop. That fits better into the declarative style that react's developers try to promote, which is at the core of react.