I am very new to React and am trying to create a page where clicking on the color square will show the hex code for that color. I've tried a bunch of different things and I can't figure out if my problem is in the event handling, in the state handling, both, or in something else altogether. I can get the hex code to either be there or not, but not have it change when I click.
Here is my main:
<main>
<h1>Dynamic Hex Code Display</h1>
<div id="container"></div>
<script type="text/babel">
class ColorSquare extends React.Component {
render() {
var blockStyle = {
height: 150,
backgroundColor: this.props.color,
};
return <div style={blockStyle} onClick = {this.props.onClick}></div>;
}
}
class HexDisplay extends React.Component {
render() {
var hexText = {
fontFamily: "arial",
fontWeight: "bold",
padding: 15,
margin: 0,
textAlign: "center",
};
var hexTextVis = {
...hexText,
visibility: "visible"
}
var hexTextInvis = {
...hexText,
visibility: "hidden"
}
var isVisible = this.props.isVisible;
if (isVisible) {
return <p style={hexTextVis}>{this.props.color}</p>;
} else {
return <p style={hexTextInvis}>{this.props.color}</p>;
}
}
}
class HexParent extends React.Component {
constructor(props) {
super(props);
this.state = {
isVisible: false
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
this.setState(currentVis => ({isVisible: !currentVis.isVisible}));
console.log(this.state);
console.log('clicking');
}
render() {
var fullBoxStyle = {
padding: 0,
margin: 10,
backgroundColor: "#fff",
boxShadow: "3px 3px 5px #808080",
boxRadius: "5px 5px",
height: 200,
width: 150,
};
var buttonStyle = {
width:150,
backgroundColor: this.props.color
}
return (
<div style={fullBoxStyle}>
<span onClick={(e) => this.handleClick()}>
<ColorSquare color={this.props.color} />
<span style={{
isVisible: this.state.isVisible ? "true" : "false",
}}>
<HexDisplay color={this.props.color} />
</span>
</span>
</div>
);
}
}
ReactDOM.render(
<div class="colorRow">
<HexParent color="#ba2c9d" />
<HexParent color="#2cba90" />
<HexParent color="#2c9dba" />
</div>,
document.querySelector("#container")
);
</script>
When the object is created, it's a hexTextVis object. When you click, isVisible changes, but it's still a hexTextVis object and so the render doesn't change. You could either do something like:
<HexDisplay visibility={state.isVisible}/>
or
{state.isVisible ? <div/> : <HexDisplay />}
style={{
isVisible: this.state.isVisible ? "true" : "false",
}}
There isn't a css property with this name. Perhaps you meant to use visibility?
style={{
visibility: this.state.isVisible ? "visible" : "hidden"
}}
Try wrapping the span and and using a ternary operator to render the span element, based on if the condition of isVisible is equal to true, otherwise it should not return anything
{this.state.isVisible && <span><HexDisplay /></span>}
What i try to achieve is, to set a button color based on the current SDG ( understand it as a chapter). So i want to set the chapter name using a variable sdg and then i want to apply the right color from a css file to the buttons in the constructor. I already used a similar approach in the header where the ClassName contains a variable sdg so the right css is picked, but it seems it only works after i return().
If you need a better explenation or have a better approach please write it too.
Edit: please take it easy on me , im only 16 and dont know much ;)
// eslint-disable-next-line eslint-comments/disable-enable-pair
/* eslint-disable unicorn/filename-case */
import * as React from "react";
import Modal, { ICustomModalStyle } from "#bdenzer/react-modal";
import Logo from "../../../SDGLogos/Goal-06.png";
interface States {
button1color: string;
button2color: string;
shouldShowModal: boolean;
onlyCloseWithButton: boolean;
}
const sdg = "SDG06";
const buttonsdg = getComputedStyle(app.colour_SDG01);
// eslint-disable-next-line react/prefer-stateless-function
export class Quiz extends React.Component<unknown, States> {
constructor(props: unknown) {
super(props);
this.state = {
button1color: "rgb(204,204,255)",
button2color: "blue",
shouldShowModal: false,
onlyCloseWithButton: true,
};
this.closeModal = this.closeModal.bind(this);
this.openModal = this.openModal.bind(this);
}
handleClick(): void {
this.setState(({ button1color }) => ({
button1color: "green",
button2color: "red",
}));
}
private closeModal(): void {
this.setState({ shouldShowModal: false });
}
private openModal(): void {
this.setState({ shouldShowModal: true });
}
render(): JSX.Element {
const modalStyle: ICustomModalStyle = {
animationTime: 400,
closeButtonText: {
color: "white",
},
hoveredButtonText: {
fontWeight: "bold",
},
modalHeader: {
backgroundColor: "green",
},
modalTitle: {
color: "white",
},
};
return (
<div>
<div className={`colour_${sdg}`}>
<div className="header">
Hochwertige Bildung <img className="sdglogo" alt="logo" src={Logo} />
</div>
</div>
<p className="quizQuestion">Does a passenger car or a plane produce more greenhouse gases?</p>
<div>
<button
className="answerButtonleft"
style={{ backgroundColor: this.state.button1color }}
type="button"
onClick={() => {
this.handleClick();
setTimeout(() => {
this.openModal();
}, 1000);
}}
>
The passenger car
</button>
<button
className="answerButtonright"
style={{ backgroundColor: this.state.button2color }}
type="button"
onClick={() => {
this.handleClick();
setTimeout(() => {
this.openModal();
}, 1000);
}}
>
The plane
</button>
</div>
<div>
<Modal
closeModal={this.closeModal}
customStyle={modalStyle}
shouldShowModal={this.state.shouldShowModal}
title="React Modal in TypeScript"
onlyCloseWithButton={this.state.onlyCloseWithButton === true}
>
The plane does. Studies show that a plane produces about 230 grams per Person per kilometer
(g/Pkm) while a passenger car only frees about 147 g/Pkm.
</Modal>
</div>
</div>
);
}
}
:root { --SDG01color: #E5243B; }
:root { --SDG02color: #DDA63A;}
:root { --SDG03color: #4C9F38;}
:root { --SDG04color: #C5192D;}
:root { --SDG05color: #FF3A21;}
:root { --SDG06color: #26BDE2;}
:root { --SDG07color: #FCC30B;}
:root { --SDG08color: #A21942;}
:root { --SDG09color: #FD6925;}
:root { --SDG10color: #DD1367;}
:root { --SDG11color: #FD9D24;}
:root { --SDG12color: #BF8B2E;}
:root { --SDG13color: #3F7E44;}
:root { --SDG14color: #0A97D9;}
:root { --SDG15color: #56C02B;}
:root { --SDG16color: #00689D;}
:root { --SDG17color: #19486A ;}
.colour_SDG01{
background-color: var(--SDG01color);
}
.colour_SDG02{
background-color: var(--SDG02color);
}
.colour_SDG03 {
background-color: var(--SDG03color);
}
.colour_SDG04 {
background-color: var(--SDG04color);
}
.colour_SDG05 {
background-color: var(--SDG05color);
}
.colour_SDG06 {
background-color: var(--SDG06color);
}
.colour_SDG07 {
background-color: var(--SDG07color);
}
.colour_SDG08 {
background-color: var(--SDG08color);
}
.colour_SDG09 {
background-color: var(--SDG09color);
}
.colour_SDG10 {
background-color: var(--SDG10color);
}
.colour_SDG11 {
background-color: var(--SDG11color);
}
.colour_SDG12 {
background-color: var(--SDG12color);
}
.colour_SDG13 {
background-color: var(--SDG13color);
}
.colour_SDG14{
background-color: var(--SDG14color);
}
.colour_SDG15 {
background-color: var(--SDG15color);
}
.colour_SDG16 {
background-color: var(--SDG16color);
}
.colour_SDG17 {
background-color: var(--SDG17color);
}
Just add the className={`colour_${sdg}`} attribute to your buttons, like you did in your header! e.g. className={`answerButtonleft colour_${sdg}`}
You can remove the style={{ backgroundColor: ... }} statements from the elements, the computed style part, and the button colours from your state.
I assume the answerButtonleft and similar classes are in another CSS file, or you just haven't pasted, or haven't yet implemented them.
I am trying to make a horizontal list menu using react and react-boostrap. But as the length of the list gets bigger than container, the list gets out. I'm using overlow-Y as scroll there but I'd like to have 2 button through which I can scroll through the list. How can I do that in React? I want results like the one in picture.
...
import React, { useState } from "react";
import Jumbotron from "react-bootstrap/Jumbotron";
import ListGroup from "react-bootstrap/ListGroup";
import Container from "react-bootstrap/Container";
import Button from "react-bootstrap/Button";
import "./App.css";
const App = () => {
const [data, useData] = useState([
{ list: "appelllll" },
{ list: "ballllslsss" },
{ list: "cattsssssss" },
{ list: "dogssssss" },
{ list: "eggssss" },
{ list: "fatssssssssssssssssssss" },
{ list: "goatssssssssssssssss" },
{ list: "heloooooooooooooooooo" },
{ list: "ieloooooooooooooo" },
{ list: "jelooooooooo" },
{ list: "kelooooooo" },
{ list: "leooo" },
{ list: "melosdsadsado" }
]);
return (
<Container className="p-3">
<ListGroup
className="list_menu"
horizontal
style={{
overflowX: "scroll"
}}
>
<button>+</button>
{data.map((data, i) => {
return (
<div>
<ListGroup.Item
className="list_item"
key={i}
onClick={() => console.log(data.list)}
>
{data.list}
</ListGroup.Item>
</div>
);
})}
<button> > </button>
</ListGroup>
</Container>
);
};
export default App;
...
my working demo is
https://codesandbox.io/s/vigorous-rgb-koiwf?file=/src/App.js
Because you set
.list_menu::-webkit-scrollbar {
width: 0;
}
So remove width: 0; in .list_menu::-webkit-scrollbar or remove className="list_menu" would work
<ListGroup
className="list_menu"
horizontal
style={{
overflowX: "scroll"
}}
>
I have a reusable React list component that can have nested children and I want to draw an arrow from the parent div to all direct children divs like the picture below.
List Component Image
Here is an example of a nested list component:
import React from 'react';
import ListElement from './ListElement.js';
const List = () => (
<>
<ListElement>
<ListElement>
<ListElement>
<ListElement />
<ListElement>
<ListElement />
</ListElement>
</ListElement>
<ListElement />
</ListElement>
<ListElement />
</ListElement>
<ListElement />
</>
);
export default List;
The ListElement component looks something like this:
import React from 'react';
const ListElement = props => {
const indentationStyle = { paddingLeft: `${3 * props.indent}rem`,
position: 'relative'};
const lineStyle = {
left: `${2 + 3 * (props.indent - 1.2)}rem`,
};
const tile = (
<div style={indentationStyle}>
{props.indent > 0 ? (
<div className={'arrow-line-container'} style={lineStyle}>
<div className={'arrow-line'}/>
<div className={'curve-arrow-line'}/>
</div>
) : null}
<div
style={{
border: '1px solid black',
padding: '1rem',
marginBottom: '1rem',
}}
>
I am a ListElement
</div>
</div>
);
const getChildren = () => {
let elements = React.Children.toArray(props.children);
// increase indent prop of each child and assign what number child it is in the list
elements = elements.map((element, index) => {
return React.cloneElement(element, {
...element.props,
indent: props.indent + 1,
childNumber: index,
});
});
return elements;
};
const childTiles = <div className={'child-tile'}>{getChildren()}</div>;
const arrowStyle = {
backgroundPosition: `${1.3 + 3 * (props.indent - 1)}rem`,
};
return (
<>
<ul className={'no-bullet'}>
<li
className={props.indent === 0 ? 'no-arrow' : 'arrow'}
style={arrowStyle}
>
{tile}
</li>
{props.children ? childTiles : null}
</ul>
</>
);
};
ListElement.defaultProps = {
childNumber: 0,
indent: 0,
};
export default ListElement;
and the css looks like this:
ul.no-bullet {
list-style-type: none;
padding: 0;
margin: 0;
}
.arrow-line {
border-left: 2px solid #6a6969;
content: "";
position: absolute;
height: 65%;
}
li.arrow {
background: url("./arrow.png") no-repeat;
}
li.no-arrow {
display: block;
}
Currently, I am creating the list with <li> elements and changing the bullet to an image of the arrow. I want to draw the lines from the parent and attach them to the arrows at each child. I am struggling with calculating the correct height of the line and the position for the top of the line. Any suggestions are appreciated.
Here is a link to the Plunker: https://plnkr.co/edit/GFrriWfJyeur7MRh?open=Hello.js&deferRun=1&preview
I managed to find a solution by only drawing one line at the last child and using offsetTop and getBoundingClientRect().height to calculate the position and height of the arrow-line. Working solution here: https://plnkr.co/edit/SFzgiZi1dckRa79C
I have an Card Component. It contains an image and text. By default, the image will be an redImage and the text are black. Onmouseover on that card, the default redimage should change to whiteimage and the text need to change into white color. I am displaying the card contents using map method.
Now, i can change the color, while mouseover using css, but, i can't change the image properly. But, i can change the image on hover, if i am not using the map function by hardcoding the content directly in the component. After using map method only, i am facing the issue. Please let me know, how can I achieve that. Please find my code below.
/***App***/
import React,{ Component } from 'react';
import SchDic from './SchDic'
class App extends Component {
constructor(props){
super(props);
this.state ={
Lists : [
{id:1, imgRed:require('../assets/images/red/das-red.svg'), imgWhite: require('../assets/images/white/das-whi.svg'),
Name: 'All-in-1 Dashboard',
Details:'Easily navigate the simple-to-use dashboard to track your volunteers, manage your opportunities and relationships, and gain access to advanced reporting.'},
{id:2, imgRed:require('../assets/images/red/scr-red.svg'), imgWhite: require('../assets/images/white/dig-whi.svg'),
Name: 'Screening Organizations',
Details:'Control the opportunities visible to your students by screening organizations. Invite your partnered nonprofits.' },
{id:3, imgRed:require('../assets/images/red/dig-red.svg'), imgWhite: require('../assets/images/white/pos-whi.svg'),
Name: 'Digitize Submission',
Details:'View all your student submissions to see what’s pending, approved or rejected.'},
{id:4, imgRed:require('../assets/images/red/tra-red.svg'), imgWhite: require('../assets/images/white/scr-whi.svg'),
Name: 'Tracking & Reporting',
Details:'Get up-to-date reports about how students are progressing with their commitments or requirements. Gain access to customizable analytics about individuals or groups of students.'},
{id:5, imgRed:require('../assets/images/red/pos-red.svg'), imgWhite: require('../assets/images/white/sup-whi.svg'),
Name: 'Post School-Run Events',
Details:'Get administration involved by postings school-run volunteering events directly on your private Opportunity Board..'},
{id:6, imgRed:require('../assets/images/red/sup-red.svg'), imgWhite: require('../assets/images/white/tra-whi.svg'),
Name: 'Support',
Details:'Get access to tons of resources on our FAQ or contact our team directly. We take pride in our commitment in helping you build your community.'},
],
};
}
render() {
return (
<div className="App" >
<SchDic Lists = {this.state.Lists}/>
</div>
);
}
}
export default App;
/***SchDiv***/
import React,{ Component } from 'react';
import { Card,CardMedia,CardHeader,CardContent,Typography,withStyles } from '#material-ui/core';
const Styles = {
card: {
width:'385px',
height:'241px',
padding:'0px',
margin:'15px',
cursor: 'pointer',
'&:hover': {
background: '#E8583E',
color:'white',
}
},
media: {
height: 41,
maxWidth:41,
margin:'15px',
},
name:{
padding:'1px',
margin:'15px',
},
details:{
fontSize: '14px',
padding: '0 15px',
minHeight: '25px',
align: 'left',
},
};
class SchDic extends Component {
constructor(props){
super(props);
this.state = {
value: 0,
img: require('../assets/images/red/das-red.svg'),
imgOne: require('../assets/images/red/dig-red.svg'),
imgTwo: require('../assets/images/red/pos-red.svg'),
imgThree: require('../assets/images/red/scr-red.svg'),
imgFour: require('../assets/images/red/sup-red.svg'),
imgFive: require('../assets/images/red/tra-red.svg'),
};
this.handleMouseOver = this.handleMouseOver.bind(this);
this.handleMouseOut = this.handleMouseOut.bind(this);
}
handleChange = (event, value) => {
this.setState({ value });
};
handleMouseOver(val) {
if(val === 0){
this.setState({
img: require('../assets/images/white/das-whi.svg')
});
} else if(val === 1){
this.setState({
imgOne: require('../assets/images/white/dig-whi.svg')
});
} else if(val === 2){
this.setState({
imgTwo: require('../assets/images/white/pos-whi.svg')
});
} else if(val===3){
this.setState({
imgThree: require('../assets/images/white/scr-whi.svg')
});
} else if(val===4){
this.setState({
imgFour: require('../assets/images/white/sup-whi.svg')
});
} else {
this.setState({
imgFive: require('../assets/images/white/tra-whi.svg')
});
}
}
handleMouseOut(val) {
this.setState({
img: require('../assets/images/red/das-red.svg'),
imgOne: require('../assets/images/red/dig-red.svg'),
imgTwo: require('../assets/images/red/pos-red.svg'),
imgThree: require('../assets/images/red/scr-red.svg'),
imgFour: require('../assets/images/red/sup-red.svg'),
imgFive: require('../assets/images/red/tra-red.svg'),
});
}
render(){
const { classes }= this.props
const { Lists } = this.props;
const Post = Lists.map(List => {
return(
<div >
<Card className={classes.card} onMouseOver={() => this.handleMouseOver(List.id)} onMouseOut={this.handleMouseOut} elevation={1}>
<CardMedia
className={classes.media}
image={List.imgRed}
/>
<CardHeader className={classes.name}
titleTypographyProps={{variant:'h5' }}
title={List.Name}
/>
<CardContent className={classes.details} >
<Typography variant='Body2' color=" " component="p">
{List.Details}
</Typography>
</CardContent>
</Card>
</div>
)}
);
const divStyle = {
paddingLeft:'350px',
paddingRight:'150px',
display: 'flex',
flexWrap: 'wrap',
};
return(
<div className="coreFeatures" style={divStyle} >
{ Post }
</div>
)
}
}
export default withStyles(Styles)(SchDic);
"well i also stuck in the similar problem
but i got the solution which really works
just create an image folder in public folder of ur react project
now i created a tag in one of the react component as:
<img src= {process.env.PUBLIC_URL + '/image/xyz.png'} />
now i want this image to change by using mouseover listener
<img src= {process.env.PUBLIC_URL + '/image/xyz.png'} onMouseOver={() => this.changeImg()}/>
i defined the changeImg function as:
changeLogo= () => { var a= document.querySelector('.logoA');
a.setAttribute("src",'./images/logoB.svg')
}
but the problem is ...(just read this post)
https://facebook.github.io/create-react-app/docs/using-the-public-folder "
Answer For My Question,
import React,{ Component } from 'react';
import SchDic from './SchDic'
class App extends Component {
constructor(props){
super(props);
this.state ={
Lists : [
{id:1, imgRed:require('../assets/images/red/das-red.svg'), imgWhite: require('../assets/images/white/das-whi.svg'),
Name: 'All-in-1 Dashboard',
Details:'Easily navigate the simple-to-use dashboard to track your volunteers, manage your opportunities and relationships, and gain access to advanced reporting.'},
{id:2, imgRed:require('../assets/images/red/scr-red.svg'), imgWhite: require('../assets/images/white/dig-whi.svg'),
Name: 'Screening Organizations',
Details:'Control the opportunities visible to your students by screening organizations. Invite your partnered nonprofits.' },
{id:3, imgRed:require('../assets/images/red/dig-red.svg'), imgWhite: require('../assets/images/white/pos-whi.svg'),
Name: 'Digitize Submission',
Details:'View all your student submissions to see what’s pending, approved or rejected.'},
{id:4, imgRed:require('../assets/images/red/tra-red.svg'), imgWhite: require('../assets/images/white/scr-whi.svg'),
Name: 'Tracking & Reporting',
Details:'Get up-to-date reports about how students are progressing with their commitments or requirements. Gain access to customizable analytics about individuals or groups of students.'},
{id:5, imgRed:require('../assets/images/red/pos-red.svg'), imgWhite: require('../assets/images/white/sup-whi.svg'),
Name: 'Post School-Run Events',
Details:'Get administration involved by postings school-run volunteering events directly on your private Opportunity Board..'},
{id:6, imgRed:require('../assets/images/red/sup-red.svg'), imgWhite: require('../assets/images/white/tra-whi.svg'),
Name: 'Support',
Details:'Get access to tons of resources on our FAQ or contact our team directly. We take pride in our commitment in helping you build your community.'},
],
};
}
render() {
return (
<div className="App" >
<SchDic Lists = {this.state.Lists}/>
</div>
);
}
}
export default App;
/***SchDiv***/
import React,{ Component } from 'react';
import { Card,CardMedia,CardHeader,CardContent,Typography,withStyles } from '#material-ui/core';
const Styles = {
card: {
width:'385px',
height:'241px',
padding:'0px',
margin:'15px',
cursor: 'pointer',
'&:hover': {
background: '#E8583E',
color:'white',
"& $imgOne": {
display: 'none'
},
"& $imgTwo": {
display: 'block'
},
},
},
media: {
height: 41,
maxWidth:41,
margin:'15px',
"& + $imgOne": {
display: 'block'
},
"& + $imgTwo": {
display: 'none'
}
},
imgOne: {},
imgTwo: {},
name:{
padding:'1px',
margin:'15px',
},
details:{
fontSize: '14px',
padding: '0 15px',
minHeight: '25px',
align: 'left',
},
};
class SchDic extends Component {
constructor(props){
super(props);
this.state = {
value: 0,
};
}
handleChange = (event, value) => {
this.setState({ value });
};
render(){
const { classes }= this.props
const { Lists } = this.props;
const Post = Lists.map(List => {
return(
<div >
<Card className={classes.card} elevation={1}>
<CardMedia
className={`${classes.media} ${classes.imgOne}`}
image={List.imgRed}
/>
<CardMedia
className={`${classes.media} ${classes.imgTwo}`}
image={List.imgWhite}
/>
<CardHeader className={classes.name}
titleTypographyProps={{variant:'h5' }}
title={List.Name}
/>
<CardContent className={classes.details} >
<Typography variant='Body2' color=" " component="p">
{List.Details}
</Typography>
</CardContent>
</Card>
</div>
)}
);
const divStyle = {
paddingLeft:'350px',
paddingRight:'150px',
display: 'flex',
flexWrap: 'wrap',
};
return(
<div className="coreFeatures" style={divStyle} >
{ Post }
</div>
)
}
}
export default withStyles(Styles)(SchDic);