Changing an object value from a Class

I have a js file handling my css where I am trying to change the value of an object, but the value stays the same.

let inputBoxInner = {
  width: "80%",
  marginTop: 5,
  alignItems: "center",
  color: "#397185",
  cursor: "text",
  height: 36,
  border: "1px solid #80cfc6",
  visibility: "visible",
  opacity: 0.2,
  setOpacity: function (e) {
    this.opacity = e
  };
};

module.exports = {
  inputBoxInner
};

import React, {Component} from "react";
import {inputBoxInner} from "../css/style.js";

export default class Input extends Component {
  state = {
    borderOpacity: 1,
    id: ""
  };

  return(
   <div
     className="input"
     onClick={(e) => {
       inputBoxInner.setOpacity(this.state.borderOpacity);
       this.setState({id: e.target.className});
     }}
     style={inputBoxInner}
   />
  );
};

I assume the “this.opacity” is only returning a reference and not modifying the actual object and I am unsure of how to make this object mutable.

How would I go about changing this value?

Answer

You should save a clicked state in the state and set opacity depending on it.

state = {
  borderOpacity: 1,     
  id: "",     
  isClicked: false   
}; 
   
return(
  <div 
  className="input"  
  onClick={(e) => { this.setState({id: e.target.className, isClicked: true });  }}      
  style={{...inputBoxInner, opacity: this.state.isClicked ? 
  this.state.borderOpacity : inputBoxInner.opacity}}    
  />
);

Advertisement

Answer