Is it possible to change value in element without changing state? - reactjs

Question

I have code like below;
class Comment extends Component {
constructor(props) {
super(props);
const color = "red";
}
changeColor() {
this.color = "blue";
console.log(this.color);
}
render() {
return(
<div className="CommentPlaceHolder" style={{backgroundColor: this.color}}>
<form id="form1">
<textarea onFocus={this.changeColor} className="comment" id="feed" name="subject" placeholder="Write something.."></textarea>
<button type="submit" form="form1">Paskelbti</button>
</form>
</div>
);
}
}
export default Comment;
I have a textarea inside div container, and I want that when mouse is clicked on textarea, to change div container color. I have tried many things and all failed. Is it possible to do that without states?

Answer 1

A couple things:
First, the way you are declaring the color in the constructor. You are just declaring a local const that won't be accessible from the components other functions. The correct way to declare it would be using this:
super(props);
this.color = "red";
}
Next, in the onFocus event on the text area, you aren't firing the function appropriately. Use the fat arrow to do so, like this:
<textarea onFocus={() => this.changeColor()} className="comment" id="feed" name="subject" placeholder="Write something.."></textarea>
Now... The problem with the fact that you are not using state is that when you are changing the component's attributes, the component doesn't automatically re-render, as it does when you use this.setState. So you will have to force it to re-render. Luckily, there is the this.forceUpdate() function. So in the changeColor function, just call it.
changeColor() {
this.color = "blue";
console.log(this.color);
this.forceUpdate()
}
here is a working version of these changes:
class App extends React.Component {
constructor(props) {
super(props);
this.color = "red";
}
changeColor() {
this.color = "blue";
console.log(this.color);
this.forceUpdate()
}
render() {
return(
<div className="CommentPlaceHolder" style={{backgroundColor: this.color}}>
<form id="form1">
<textarea onFocus={() => this.changeColor()} className="comment" id="feed" name="subject" placeholder="Write something.."></textarea>
<button type="submit" form="form1">Paskelbti</button>
</form>
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 2

I would not recommend updating the DOM manually, nor would I recommend calling this.forceUpdate() - that isn't very good practice with React.
Using setState() is the proper way to get the correct result you are going for. For a small, simple app I think you could get away with doing something like this:
import React, { Component } from 'react'
import styled from 'styled-components'
export default class ChangingDiv extends Component {
state = {
bgColor: 'red'
}
handleColorChange = () => {
const { bgColor } = this.state
bgColor === 'red'
?
this.setState({ bgColor: 'blue' })
:
this.setState({ bgColor: 'red' })
}
render() {
const { bgColor } = this.state
return (
<ColorDiv color={bgColor}>
<TextBox
onFocus={this.handleColorChange}
onBlur={this.handleColorChange}
/>
</ColorDiv>
)
}
}
const ColorDiv = styled.div`
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
background-color: ${props => props.color};
`
const TextBox = styled.textarea`
width: 300px;
padding: 20px;
font-size: 16pt;
`
Using styled components you can set a color based on a state prop. Here I am setting the background-color of the ColorDiv to match the bgColor state prop. When it changes, so does the background-color. You could even add a transition duration to the ColorDiv for a bit smoother transition.
If you aren't using styled components you could essentially do the same thing except instead of doing a bgColor state prop you would make it a className. The class name will change as you focus and blur the input box:
import React, { Component } from 'react'
export default class ChangingDiv extends Component {
state = {
className: 'red'
}
handleColorChange = () => {
const { className } = this.state
className === 'red'
?
this.setState({ className: 'blue' })
:
this.setState({ className: 'red' })
}
render() {
const { className } = this.state
return (
<div className={className}>
<textarea
onFocus={this.handleColorChange}
onBlur={this.handleColorChange}
/>
</div>
)
}
}
If you are still not wanting to set the color stately then you could always do the traditional document.getElementById('#colorDiv') and change the color that way. But this will be breaking the rules of React because you will be manipulating the DOM directly.

Answer 3

You can call this.forceUpdate() to force a rerender, but it isn't recommended. Its almost always better to just update the state.
See Docs

Answer 4

To have a change in your UI, component needs to re-render. To re-render a component either your state or props need to change or you need to call forceUpdate (which is not suggested)
The problem with your code, you are changing a static value and this change is not reflecting in your component until it is re-rendered. To change this you can use below sample code.
constructor(props) {
super(props);
this.state = { color: 'red' };
}
changeColor = () => {
this.setState({color: "blue"});
}
render() {
return(
<div className="CommentPlaceHolder" style={{backgroundColor: this.state.color}}>
{/* some other code */}
</div>
);
}