I am a beginner to ReactJS. I am trying to display some letters with color coded as described below. I am able to display the letters in the browser. However, I am not able to display it color coded. Please help me out in fix the error in the following HTML code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> React1</title>
<style>
#container {
padding: 50px;
background-color: #EEE;
}
#container h1 .letter{
font-size: 144px;
font-family:sans-serif;
color: #0080A9;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<script type="text/babel">
class Letter extends React.Component {
render() {
var letterStyle = {
padding: 10,
margin:10,
backgroundColor: this.props.bgcolor,
color: "#333",
display: "inline-block",
fontFamily: "monospace",
fontSize: 32,
textAlign: "center"
};
return (
<div>
{this.props.children}
</div>
);
}
}
var destination = document.querySelector("#container");
ReactDOM.render(<div>
<Letter bgcolor="#58B3FF">A</Letter>
<Letter bgcolor="#58B3FF">E</Letter>
<Letter bgcolor="#58B3FF">I</Letter>
<Letter bgcolor="#58B3FF">O</Letter>
<Letter bgcolor="#58B3FF">U</Letter>
</div>,
destination
)
</script>
</body>
</html>
It looks like letterStyle was created but never used it. If you want to use in-line styling, I believe you will want it to look something like this:
return (
<div style={letterStyle}>
{this.props.children}
</div>
);
Related
I noticed a white bar on the bottom of the screen after turning on night mode which turns the background a dark purple (triggered by pressing the moon on the right). I've tried changing the padding and margins but nothing I try has gotten rid of this white bar. I believe the index.html is causing the problem but I have the margin set correctly so I don't know how to fix the margins.
import React, {useState} from 'react';
import Card from '#material-ui/core/Card';
import CardContent from '#material-ui/core/CardContent';
import ListItemIcon from '#material-ui/core/ListItemIcon';
import ListItemText from '#material-ui/core/ListItemText';
import NightsStayIcon from '#material-ui/icons/NightsStay';
import AddBoxRoundedIcon from '#material-ui/icons/AddBoxRounded';
import { Button , TextField, IconButton} from '#material-ui/core';
function App() {
const[isNightMode, setIsNightMode] = React.useState(false)
const [nightMode, setNightMode] = React.useState({
background: "#FFFFFF",
banner: "#3F51B5",
bannerText: "#FFFFFF",
listText: "#000000",
inputBackground: "FFFFFF"
});
function nightmode(){
if(isNightMode){
setIsNightMode(false);
}
else{
setIsNightMode(true);
}
if(isNightMode){
setNightMode(
{
background: "#413250",
bannerText: "#413250",
listText: "#FFFFFF",
banner: "#FFFFFF",
inputBackground: "FFFFFF"
});
}
else{
setNightMode({
background: "#FFFFFF" ,
bannerText: "#FFFFFF" ,
listText: "#000000",
banner: "#3F51B5",
inputBackground: "FFFFFF"
});
}
}
const [todos, setTodos] = useState([
{
text: "Learn about React",
isCompleted: true
},
]);
const [value, setValue] = useState("");
const addTodo = text => {
const newTodos = [...todos, { text }];
setTodos(newTodos);
};
return (
<div style={{padding: 50, flexDirection: 'column', backgroundColor: nightMode.background}}>
<div>
<div style = {{display: 'flex', fontFamily: 'Work Sans', fontSize: 25 , marginBottom: 25, color: '#CDCACA'}}>
<text>Good Morning</text>
</div>
</div>
<Card style = {{width: window.innerWidth/4, borderRadius: 30, backgroundColor: nightMode.banner, color: nightMode.bannerText}}>
<CardContent>
<div style = {{display: 'flex', fontFamily: 'Work Sans', fontSize: 55}}>
<text>Tuesday</text>
</div>
<text style = {{display: 'flex', fontFamily: 'Work Sans', fontSize: 45}}>11:45</text>
</CardContent>
</Card>
<div style = {{display: 'flex', justifyContent: 'flex-end'}}>
<IconButton onClick = {nightmode}>
<NightsStayIcon/>
</IconButton>
</div>
</div>
);
};
export default App;
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght#500&display=swap" rel="stylesheet">
<title>React App</title>
<style>
html,body, #root {
height: 50%;
}
body{
margin: 0;
background-color: #ffffff; //**This section is causing the issue
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
Change
html,body, #root {
height: 50%;
}
To 100% and add the same css directive (height: "100%") to the parent div in the react code.
Demo
There may be some margin being placed by default on your html/body element. In a sandbox I spun up with your code, it was the body applying a default 8px margin.
html, body {
margin: 0;
padding: 0;
}
I'm kinda new to react and I'm trying to display a tooltip on an image.
<OverlayTrigger placement="right" overlay={(<Tooltip id="hi">Hello, world!</Tooltip>)} triggerType="hover">
<img alt="" className="char-img rotate_m_5" src="/images/characters/wolf_xs.png"/>
</OverlayTrigger>
But nothing happens when the cursor hovers the image.
I have no errors just nothing happens
Edit :
I saw in Chrome DevTools that the tooltip appears in the HTML but not in the app, might be a CSS issue.
<div id="hi" role="tooltip" class="fade in tooltip top" style="top: 313.75px; left: 448.039px;"><div class="tooltip-arrow" style="left: 50%;"></div><div class="tooltip-inner">Hello, world!</div></div>
Thanks
Here you go
class App extends React.Component {
render() {
return ( <
ReactBootstrap.OverlayTrigger placement = 'top'
delay = {
{
show: 1000
}
}
overlay = { <
ReactBootstrap.Tooltip id = "tooltip" >
This is a sample text <
/ReactBootstrap.Tooltip>
} >
<
img width = "300px"
src = "https://cdn.pixabay.com/photo/2017/07/01/19/48/background-2462431_960_720.jpg" / >
<
/ReactBootstrap.OverlayTrigger>
)
}
}
ReactDOM.render( < App / > ,
document.getElementById('root')
);
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/react-bootstrap#next/dist/react-bootstrap.min.js" crossorigin></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" crossorigin="anonymous">
<div id="root" />
Need to add the CSS class "show" to the tooltip
<Tooltip id="hi" className="show">Hello World!</Tooltip>
Use this code issue solve
.popover .arrow {
background: transparent !important;
z-index: 99;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #c7c7c7;
bottom: -7px;
}
I'm trying to implement the solution provided in this answer.
In the second step, I need to get the size of a div defined in my component in my component's componentDidMount. Many threads on StackOverflow have proposed using refs for this purpose. However, I have difficulty understanding how to implement it. Would you please give me a piece of code as an example to learn how to get the element's size after it is mounted in componentDidMount?
You can create a ref with createRef and store it in an instance variable which you pass to the ref prop of the element you want a reference to.
This ref will then have a reference to the node in the current property after the component has mounted.
Example
class App extends React.Component {
ref = React.createRef();
componentDidMount() {
const { current } = this.ref;
console.log(`${current.offsetWidth}, ${current.offsetHeight}`);
}
render() {
return <div ref={this.ref} style={{ width: 200, height: 200 }} />;
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<div id="root"></div>
By creating a ref you have access to all element's properties like offsetWidth.
https://developer.mozilla.org/en-US/docs/Web/API/Element
class TodoApp extends React.Component {
constructor(props) {
super(props)
this.state = {
items: [
{ text: "Learn JavaScript" },
{ text: "Learn React" },
{ text: "Play around in JSFiddle" },
{ text: "Build something awesome" }
]
}
this.myRef = React.createRef();
}
componentDidMount() {
console.log(this.myRef.current.offsetWidth);
}
render() {
return (
<div ref={this.myRef}>
{this.state.items.map((item, key) => (
<div className="rootContainer" key={key}>
<div className="item">{item.text}</div>
</div>
))}
</div>
)
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
.rootContainer {
display: inline-block;
}
.item {
display: inline-block;
width: auto;
height: 100px;
background: red;
border: 1px solid green;
}
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="app"></div>
I'm trying to get a child component to render in react and it's not rendering. If I write the actual JSX composed in the child component in the parent, it renders, Why is that? The examples in the documentation show that this is possible, I don't know what I'm doing wrong.
Example here: https://jsfiddle.net/69z2wepo/309969/
class App extends React.Component {
render() {
return(
<Rectangle />
);
}
}
function Rectangle(){
return (
<div className="Rectangle">
<square />
</div>
);
}
function square(){
return (
<div className="square">
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('container')
);
.Rectangle {
position: relative;
background-color: #222;
height: 760px;
width: 40px;
}
.square {
position: absolute;
background-color: green;
top: 0px;
left: 0px;
height: 20px;
width: 20px;
}
<!Doctype>
<html>
<head>
<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>
</head>
<body>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
</body>
The end result should show a dark grey rectangle, with a 20x20 pixel green square affixed to the top left of it.
Name your components starting with a capital letter.
function Square(){
return (
<div className="square">
</div>
);
}
function Rectangle(){
return (
<div className="Rectangle">
<Square />
</div>
);
}
If you are trying to render the child component "square" then change the name square to Square and also change the function name square to Square. Component name always needs to start with Capital Letter. Otherwise it will not render.
There are 2 issues here:
Components name should start with capital letters.
In your fiddle you are using the logoutBox className but you wrote a .square css class.
class App extends React.Component {
render() {
return (
<Rectangle />
);
}
}
function Rectangle() {
return (
<div className="Rectangle">
<Square />
</div>
);
}
function Square() {
return (
<div className="square">
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
.Rectangle {
position: relative;
background-color: #222;
height: 760px;
width: 40px;
}
.square {
position: absolute;
background-color: green;
top: 0px;
left: 0px;
height: 20px;
width: 20px;
}
<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="root" />
I am in the process of learning React and trying a sample code from a book. The code is simple it is supposed to display vowels in different colors defined in the ReactDOM.render but instead it displays them all in one color coming from the style tag.
Attached below is the code
<!DOCTYPE html>
<html>
<head>
<meta charset-="utf-8'">
<title>Styling in React</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<style>
#container {
padding: 50px;
background-color: #FFF;
}
div div div {
padding: 10px;
margin: 10px;
background-color: #ffde00;
color: #333;
display: inline-block;
font-family: monospace;
font-size: 32px;
text-align: center;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var destination = document.querySelector("#container");
class Letter extends React.Component {
render() {
var letterStyle = {
padding:10,
margin:10,
backgroundColor:this.props.bgcolor,
color:"#333",
display:"inline-block",
fontFamily:"monospace",
fontSize:32,
textAlign:"center"
};
return (
<div>
{this.props.children}
</div>
);
}
}
ReactDOM.render(
<div>
<Letter bgcolor="#58B3FF">A</Letter>
<Letter bgcolor="#FF605F">E</Letter>
<Letter bgcolor="#FFD52E">I</Letter>
<Letter bgcolor="#49DD8E">O</Letter>
<Letter bgcolor="#AE99FF">U</Letter>
</div>,
destination
);
</script>
</body>
</html>
}
It looks like you aren't using letterStyle anywhere. Try the following:
render() {
var letterStyle = {
padding:10,
margin:10,
backgroundColor:this.props.bgcolor,
color:"#333",
display:"inline-block",
fontFamily:"monospace",
fontSize:32,
textAlign:"center"
};
return (
<div style={letterStyle}>
{this.props.children}
</div>
);
}
Try {this.props.bgcolor} you need a {} to use dynamic variables.