We Keep Coding

How to edit css modules in react

I have the following files:
Test.js:
import React from 'react';
import style from './style.module.css'
function Test() {
return(<div className={style.classcolor}>Test</div>);
}
export default Test;
style.module.css
.classcolor
{
background-color:blue;
}
Is there a way to change the css attributes inside the js file, similar to the code below?
style.classcolor.backgroundColor ="red";

An option is to use a variable and change the class depending on it:
class Test extends React.Component {
constructor(props) {
super(props);
this.state = { orange: true }
}
toggleClass = () => {
this.setState({ orange: !this.state.orange })
}
render() {
const { orange } = this.state
return (
<div>
<div className={orange ? 'orange' : 'red'}>Test</div>
<button onClick={this.toggleClass}>Toggle class</button>
</div>
);
}
}
ReactDOM.render(
<Test />,
document.getElementById("react")
);
.orange{
color: orange;
}
.red{
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>
A not really react way is to use element.style, more information:
document.getElementById('test').style.color = 'orange';
<div id="test">Test</div>

you can add array [0] after get the className, and then you can access the style from DOM
document.getElementsByClassName(style.classcolor)[0].style.backgroundColor = 'red'

You can see this library styled-component, you can pass props for the component and by the value of the prop, you decide in how the style will be.

Injecting dynamic HTML in React - CSS is not working

Fetching dynamic HTML from an API, the HTML is loading fine but the CSS is not working for this new HTML.
Do you I need to reload the CSS.
import React, { Component } from "react";
import Utility from "../common/Utility";
class Template extends Component {
constructor(props) {
super(props);
this.token = localStorage.getItem("token");
this.client_id = localStorage.getItem("client_id");
}
componentDidMount() {
//fetching dynamic html
Utility.ExecuteData("template", this.token, {
client_id: this.client_id
}).then(result => {
var dynamic_html = document.getElementById("dynamic_html");
dynamic_html.innerHTML = result.data[0].template;
});
}
render() {
return (
<React.Fragment>
<div id="dynamic_html" />
</React.Fragment>
);
}
}
export default Template;

It is possible to get this to work but instead of className you'll need to use the usual HTML class attribute. I've used dangerouslySetInnerHTML here, but it's the same result if you set the innerHTML of the element like you did in your question.
function Template({ html }) {
return (
<div dangerouslySetInnerHTML={{__html: html}} />
);
}
const html = '<div class="heading">With style</div>';
ReactDOM.render(
<Template html={html} />,
document.getElementById('container')
);
.heading {
font-size: 2em;
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container"></div>

I can't comment so I'm posting it in an answer instead.
I don't know how the html is being returned from the API but I assume the css is either inlined or included as a file in the remote HTML.
If the latter is the case, it might be a possibility that the url to the css file is relative, so calling the url from another server would result in a 404.

Apanding external HTML to a react component is not working

Basically I want to add an static HTML to a react component from external script.
So I'm saving the reference of this to window variable as follows:
let { PropTypes } = React;
export default class Body extends React.Component {
constructor(){
super();
let frmTrgt={};
frmTrgt.refff=this;
console.log("tthis: ",this);
window.bdyRefrence=frmTrgt;
}
static defaultProps = {
items: []
};
static propTypes = {
items: PropTypes.array.isRequired
};
render() {
return (
<div className={styles.body}>
<h1 className={styles.header}>React Seed</h1>
<p>This is an example seed app, powered by React, ES6 & webpack.</p>
<p>Here is some example data:</p>
<Menu items={this.props.items} />
<div>
<h1>Dynamic Content</h1>
<div id="myDynamicContent"></div>
</div>
</div>
);
}
}
and in my script tag in INDEX.html( Outside Script) I'm doing like following:
function addPHtml() {
try {
window.bdyRefrence.refff.refs.formTarget.insertAdjacentHTML("<p id='mhere'>paragraph 2</p>");
}catch (err){
console.log("err: ",err);
}
}
but when I'm calling addPHtml it is giving following error:
err: TypeError: Cannot read property 'insertAdjacentHTML' of undefined
at addPHtml ((index):19)
at <anonymous>:1:1

What your trying to do is not the correct way to insert the element in React, still for you requirement please refer below mentioned code
Your render function should be like
return(
<div>
<div ref="formTarget"></div>
<h1 >React Seed</h1>
<p>This is an example seed app, powered by React, ES6 & webpack.</p>
<p>Here is some example data:</p>
<div>
<h1>Dynamic Content</h1>
<div id="myDynamicContent"></div>
</div>
</div>
)
Please check Demo here Demo
In case using new React syntax (Createclass is deprecated now) use
window.refferedItem.refs.formTarget.getDOMNode().insertAdjacentHTML

How to run script in react

Hey I have a react application and I have a input field that I would like to mask (type="password") while typing the actual password.
I have found a javascript code that does what I need but I cannot seem to make it run with React.
here is the code of the masking function:
http://pastebin.com/vqqaiDuB
but I just cant use it in my view component.
I did try to :
module.exports = MaskedPassword;
but was not able to use the class?!
I am surely missing something big...
how I import it:
import maskedInput from './../../public/MaskedPassword';
this is how my component looks like:
export default class DriversLicense extends Component {
constructor(props){
super(props);
this.state ={};
}
componentDidMount() {
maskedInput(document.getElementById("demo-field"), '\u25CF');
}
render() {
return (
<div>
<form id="demo-form" action="#">
<fieldset>
<input type="password" className="password" id="demo-field" name="pword" onChange={this.demoChange}/>
</fieldset>
</form>
</div>
);
}
}
which gives me:
this.createContextWrapper is not a function

Normally this is the way to call external libraries to make changes to components after render, I would suggest to find the react version of your library because maybe It will have problems with the binding (this). Hope this example helps.
function maskedInput(ele, symbol, obj) {
//this here is not the function
ele.value = this.someOtherFunction()
}
maskedInput.prototype = {
someOtherFunction: function(){
return "Hello"
}
}
function maskedInputGood(ele, symbol, obj) {
const someOtherFunction = function(){
return "Hello"
}
ele.value = someOtherFunction()
}
maskedInput.prototype = {
someOtherFunction: function(){
return "Hello"
}
}
var App = React.createClass({
componentDidMount() {
maskedInputGood(document.getElementById("demo-field"), '\u25CF');
maskedInput(document.getElementById("demo-field"), '\u25CF');
},
render() {
return (
<div>
<form id="demo-form" action="#">
<fieldset>
<input type="password" className="password" id="demo-field" name="pword" onChange={this.demoChange}/>
</fieldset>
</form>
</div>
);
}
})
ReactDOM.render(<App />,document.getElementById('app'))
<html>
<body>
<div id='app'></div>
<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>
</body>
</html>

It seems to me the library is not properly encapsulated, or some similar problem. Have you tried using a React component like this one: https://www.npmjs.com/package/react-password-mask
Since its a React component, it will be more natural to integrate it in your code.
Does your maskedPassword library have any feature that react-password-mask is missing?

How to use eventlisteners and functions from outside react components?

I have loaded a library (cordova) in my main index.html file. Then I added the eventlistener 'deviceready' on my document. Now how can I call this function and the related library inside a react component?
Html file:
<!DOCTYPE html>
<html>
<head>
<title>title</title>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/javascript" src="cordova.js"></script>
<script>
document.addEventListener('deviceready', onDeviceReady);
// this is the function I want to call inside my component.
// function onDeviceReady() {
// var rect = { x: 0, y: 0, width: window.innerWidth, height: window.innerHeight };
// cordova.plugins.camerapreview.startCamera(rect, 'back', true, true, true)
// cordova.plugins.camerapreview.show();
// }
</script>
</html>
My react component:
import React, { Component } from 'react';
class Example extends Component {
// Here I want to call my cordova actions inside the eventlistener
render() {
return (
<div>
<p>Example</p>
</div>
);
}
}
export default Example;

By using Reacjs lifesycle is a proper way to add and remove events
So you can do something like this:
import React, { Component } from 'react';
class Example extends Component {
componentDidMount() {
document.addEventListener('deviceready', this.deviceReady);
}
componentWillUnmount() {
document.removeEventListener('deviceready', this.deviceReady);
}
deviceReady () {
// Do some stuff
}
render() {
return (
<div>
<p>Example</p>
</div>
);
}
}
export default Example;