I get the following error when trying to render simple html into my footer:
_registerComponent(...): Target container is not a DOM e
lement.
My render() is written just like other working ones in the same document, as following:
ReactDOM.render(<Footer />, document.getElementById('app-footer'));
My footer.js from which i export the Footer class looks like this:
import React, { Component } from 'react';
class Footer extends Component{
render() {
return (
<div>
<h3>Testtext</h3>
</div>
);
}
}
export default Footer;
I have tried multiple solutions already given here but none seem to work for this seemingly easy problem. I tried putting a document.onload around it, but that did not work. I really hope someone can point out the flaw in this one.
Related
I've got this problem in ReactJS where if I Set a background color of a Body element in one page component, the color is still there when I route to other component which is not using that particular CSS.
So for example I have a welcome component which import a welcome.css that styles the background color of the body element. Then when I route to other component by clicking Link in navigation to let say contact-us component, the background color is still there on contact-us even thou contact-us does not import the welcome.css.
But in the first place if I never visit the welcome, and directly visit the contact-us, on a fresh tab, the coloring is obviously not there.
Code example:
welcome.css
body {
background-image: linear-gradient(310deg, #1b2753, #836538);
background-repeat: no-repeat;
}
Welcome.js
import React from 'react';
import { Link } from "react-router-dom";
import './assets/css/style/welcome.css';
function Welcome() {
return (
<>
<H1>Welcome !</H1>
<Link to="/contact-us">Contact Us</Link>
</>
);
}
export default Welcome;
ContactUs.js
import React from 'react';
function ContactUs() {
return (
<>
<H1>Contact Us</H1>
</>
);
}
export default ContactUs;
In react, css stylesheets are global, so it will apply that css everywhere in the toold wherever that selector is used.
To avoid that use Css modules or give unique names to every selectors.
in this case, its better to use CSS Modules.
Example: Make your component specific css with <name>.module.css and import in all required components, then use import styles from './Button.module.css'; and use ${style.<class-name>}
I hope you understand this simple example.
I tried to change the background color of my HTML element on first render by handling it in React Component with a bit help of jQuery.
This is the code inside my React Component (the props is passed from state of Parent Component):
class QuoteBox extends React.Component {
constructor(props) {
super(props)
}
componentDidMount() {
$('#root').css('background-color', this.props.color);
$('#text').css('color', this.props.color);
$('#author').css('color', this.props.color);
}
render() {
return (
<div>
<div id="quote-box" className="quote-box">
<div className="quote">
<span id="text" class="quote-text">{this.props.quote}</span>
</div>
<div id="author" className="quote-author">
<span>- {this.props.author}</span>
</div>
</div>
)
}
The code inside componentDidMount() seem doesn't recognize the this.props.color. But if change to $('#root').css('background-color', 'green'); it's immediately change the background to green on first render.
But in render() it recognize another props.
So what did I do wrong? Is there a way to target HTML element using jQuery inside React?
This most likely happens, because on the first render the props.color is not set. It is most likely, set on the parent element causing a re-render of the QuoteBox, which will not run the componentDidMount which is only run on the first render.
Besides the fact that you should not mix jQuery DOM manipulation with React, just to test your scenario, try using componentDidUpdate instead and it will most likely fix your issue.
So This is the code I am learning from a tutorial and it works but it creates a empty div container I think this is because when I created the props from react I think the h1 and p elements were empty so I think thats why this makes a empty div. Does any one know how to slove this
import React from 'react'
function Note(props) {
return (
<div className="note">
<h1>{props.title}</h1>
<p>{props.content}</p>
</div>
)
}
export default Note
I looked at many sources on how to extend a React component by inheritance. The examples I found were always adding events and not manipulating the innerHtml. So, I could not find a simpler way to do this:
// React packages
import React from 'react';
import { Link } from 'react-router-dom';
export default class LinkX extends React.Component {
render() {
return (
<Link
className={this.props.className}
to={this.props.to}
replace={this.props.replace}
>
<span>{this.props.html}</span> // Wrap with span
</Link>
}
}
In my example, I want to add a <span> that surrounds the inner text of the link. So, I added a new property html that I put as the text of the Link instance.
Then, I use it this way:
<LinkX to={"/"} html="Home" />
I wonder if there is a way to get the innerHtml from the LinkX component, surround it with <span>, and put that inside the Link without using props. Then use it like this:
<LinkX to={"/"}>Home</LinkX>
I feel like you need to use children like this:
export default class LinkX extends React.Component {
render() {
return (
<Link
className={this.props.className}
to={this.props.to}
replace={this.props.replace}
>
<span>{this.props.children}</span> // Wrap with span
</Link>
}
}
Then you can use it like this
<LinkX><b>bold</b></LinkX>
I'm learning how to use css modules with react, below is a working example of a checkbox here's what it looks like (pure HTML + CSS fiddle) without react.
import React from 'react'
import CSSModules from 'react-css-modules'
import styles from './checkbox.css'
export function Checkbox (props) {
return <div styleName="checkbox--container">
<input styleName="checkbox" type="checkbox" {...props}/>
<span styleName="checkbox--styled"></span>
</div>
}
export default CSSModules(Checkbox, styles)
This is great and all, but let's say my client comes back and wants me to change the checkbox color. Fine, seems easy enough? That fiddle above shows that there is a couple of hex-codes (#479ccf) for border and within the SVG background image. Ideally I'd be able to pass along a react prop that allows you to do something like this <Checkbox color="#666333"/> and blam! However I can't find any documentation / way to get information from the component to the CSS file.
What does this mean?
I know what the react community is going to say, that particular set of CSS isn't ideal. It can be written in javascript within the component and from there you can set the inline styles of the pieces of the checkbox to the prop color. I'm pretty sure this is possible. Is this necessary? I'd have to refactor the ::after code, question about that.
I started on making the SVG functions.
function SVGDash (color) {
return `data:image/svg+xml;charset=US-ASCII,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20viewBox%3D"0%200%2012%2012"%20enable-background%3D"new%200%200%2012%2012"><style%20type%3D"text%2Fcss">circle%2Cellipse%2Cline%2Cpath%2Cpolygon%2Cpolyline%2Crect%2Ctext%7Bfill%3A%23${color}%20%21important%3B%20%7D<%2Fstyle><path%20d%3D"M6%200"%2F><path%20d%3D"M.8%207C.3%207%200%206.7%200%206.2v-.4c0-.5.3-.8.8-.8h10.5c.4%200%20.7.3.7.8v.5c0%20.4-.3.7-.8.7H.8z"%2F><%2Fsvg>`
}
function SVGCheck (color) {
return `data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20enable-background%3D%22new%200%200%2024%2024%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Ecircle%2Cellipse%2Cline%2Cpath%2Cpolygon%2Cpolyline%2Crect%2Ctext%7Bfill%3A%23${color}%20%21important%3B%20%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M23.6%205L22%203.4c-.5-.4-1.2-.4-1.7%200L8.5%2015l-4.8-4.7c-.5-.4-1.2-.4-1.7%200L.3%2011.9c-.5.4-.5%201.2%200%201.6l7.3%207.1c.5.4%201.2.4%201.7%200l14.3-14c.5-.4.5-1.1%200-1.6z%22%2F%3E%3C%2Fsvg%3E`
}
You could create a different class composing the class you want to change the color:
.checkbox--styled-red {
composes: checkbox--styled;
background-image: url("data:image .... FF0000 ....");
}
And set it in the component when you get the matching props.color:
import React from 'react'
import CSSModules from 'react-css-modules'
import styles from './checkbox.css'
function getStyleNameForColor(color) {
colorToStyleName = {
red: 'checkbox--styled-red'
};
return colorToStyleName[color] || 'checkbox--styled';
}
export function Checkbox (props) {
return <div styleName="checkbox--container">
<input styleName="checkbox" type="checkbox" {...props}/>
<span styleName={getStyleNameForColor(props.color)}></span>
</div>
}
export default CSSModules(Checkbox, styles)
Better yet, use classnames instead of getStyleNameFor(color).