Develop Reference

drop shadow not showing when scrolled in react

I'm new in javascript react. I'm trying to implement when user scrolled down, the navbar would drop a shadow. but unfortunately it doesn't work at all, what did I do wrong??
I think there's a problem with my logic, or perhaps I do the whole code wrongly, if there's an problem with the code, please do tell me where did I do it wrong, thank you
The Code :
class Navbar extends Component {
constructor() {
super(); // super allows you to access parent class's methods and allows us to use "this." in constructor().
this.state = {
clicked: false,
scrolled: false,
}
// Note here too these bindings are necessary to make `this` work in the callback
// In general, we use binding whenever we use "setState" when handling an event
this.handleScroll = this.handleScroll.bind(this);
this.handleClick = this.handleClick.bind(this);
}
handleScroll = () => {
const offset = window.scrollY;
if (offset > 200) {
this.setState({scrolled : !this.state.scrolled})
}
}
handleClick = () => {
this.setState({ clicked: !this.state.clicked})
}
render() {
return(
<div className='mycontainer' onScroll={this.handleScroll}>
{/* Note here this.scroll.scrolled changes to this.state.scrolled */}
<nav className={this.state.scrolled ? "NavbarItems Scroll" : "NavbarItems"}>
<h1 className="navbar-logo">React <i className="fab fa-react"></i></h1>
<div className="menu-icon" onClick={this.handleClick}>
<i className={this.state.clicked ? "fas fa-times" : 'fas fa-bars'}></i>
</div>
<ul className={this.state.clicked ? 'nav-menu active' : 'nav-menu'}>
{
MenuItems.map((items, index) => {
return (
<li key = {index}><a className={items.cName} href={items.url}>
{items.title}
</a></li>
);
})
}
</ul>
<p>{window.scrollY}</p>
</nav>
</div>
);
}
}
css :
.mycontainer {
top: 0;
left: 0;
width: 100%;
height: 200%;
}
.NavbarItems {
position: fixed;
width: 100vw;
height: 85px;
background-color: white;
transition: 0.2s;
display: flex;
align-items: center;
font-size: 1.2rem;
justify-content: center;
}
.Scroll {
box-shadow: 0px 1px 10px #999;
}

you need to subscribe to window.onScroll not for div className='mycontainer'
reed this topic
Update style of a component onScroll in React.js
and (it not related to your problem)
you shouldn't use
this.handleScroll = this.handleScroll.bind(this);
this.handleClick = this.handleClick.bind(this);
if you use class properties
handleScroll = () => {
...
}
handleClick = () => {
...
}
read this doc
https://reactjs.org/docs/faq-functions.html#how-do-i-bind-a-function-to-a-component-instance

ReactJS - pass object keys and values as props to div

In my Class component Field.jsx render(), I'm expanding my <Position> component using <Flipper>, (an abstracted flip animation), like so:
import { Flipper, Flipped } from 'react-flip-toolkit'
import { Position } from "./Position";
import "./css/Position.css";
class Field extends Component {
constructor(props) {
super(props);
this.state = {
fullScreen: false,
};
}
toggleFullScreen() {
this.setState({ fullScreen: !this.state.fullScreen });
}
...
render() {
const { players } = this.props;
const { fullScreen } = this.state;
if(players){
return (
<div className="back">
<div className="field-wrapper" >
<Output output={this.props.strategy} />
<Flipper flipKey={fullScreen}>
<Flipped flipId="player">
<div className="field-row">
{this.getPlayersByPosition(players, 5).map((player,i) => (
<Position
key={i}
className={fullScreen ? "full-screen-player" : "player"}
getPositionData={this.getPositionData}
toggleFullScreen={this.toggleFullScreen.bind(this)}
>{player.name}</Position>
))}
</div>
</Flipped>
</Flipper>
</div>
</div>
);
}else{
return null}
}
When I render it, I get clickable items from the mapped function getPlayersByPosition(), like so:
And if I click on each item, it expands to a div with player name:
Which is passed as props.children at component <div>
Position.jsx
import React from "react";
import "./css/Position.css";
export const Position = props => (
<div
className={props.className}
onClick={() => {
props.getPositionData(props.children);
props.toggleFullScreen();
console.log(props.getPositionData(props.children))
}}
>
{props.children}
</div>
);
getPositionData(), however, returns an object with many items on its turn, as seen by console above:
{matches: 7, mean: 6.15, price: 9.46, value: 0.67, G: 3, …}
QUESTION:
How do I pass and print theses other props keys and values on the expanded purple div as text?, so as to end with:
Patrick de Paula
matches: 7
mean: 6.15
price:9.46
....
NOTE:
Position.css
.position-wrapper {
height: 4em;
display: flex;
justify-content: center;
align-items: center;
font-weight: lighter;
font-size: 1.4em;
color: #888888;
flex: 1;
/*outline: 1px solid #888888;*/
}
.player {
height: 4em;
width: 4em;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-weight: lighter;
font-size: 1.4em;
/*background-color: #66CD00;*/
color: #ffffff;
}
.full-screen-player {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
background-image: linear-gradient(
45deg,
rgb(121, 113, 234),
rgb(97, 71, 182)
);
}

Looks like the props are all set & ready to be print as seen on your console. You can access them via props.getPositionData(props.children).property_name_here or destructure them
export const Position = props => {
const { matches, mean, price } = props.getPositionData(props.children);
return (
<div
className={props.className}
onClick={() => {
props.getPositionData(props.children);
props.toggleFullScreen();
console.log(props.getPositionData(props.children))
}}
>
<p>Name: {props.children}</p>
<p>Matches: {matches}</p>
<p>Mean: {mean}</p>
<p>Price: {price}</p>
</div>
)
}
Regarding the issue on the fullScreen prop (see comments section):
Is there a way to print them ONLY after toggleFullScreen()
Since you already have a state on the Field component which holds your fullScreen value, on your Field component, you need to pass the fullScreen prop as well to the Position component. e.g., fullScreen={this.state.fullScreen}. Back on Position component, have some condition statements when you are rendering.
Example:
<>
{props.fullScreen &&
<p>Name: {props.children}</p>
}
</>

resizing divs on click

I've been trying to add a onClick event to the divs which will resize a div to fullscreen when clicking on that div but when I click on a div, all the div are getting expanded. How do I restrict that onClick event to only a single a div and make that single div resize to full screen? I've also added transition so that when it resize to fullscreen, it looks like a animation but all the divs have been affected by it when clicking on just a single div
import React from "react";
import "./styles.scss";
const colors = [
"palevioletred",
"red",
"green",
"blue",
"yellow",
"orange",
"lightblue"
];
const randomColor = items => {
return items[randomHeight(0, items.length)];
};
const randomHeight = (min, max) => {
return Math.floor(min + Math.random() * (max - min + 1));
};
export default class App extends React.Component {
constructor(props) {
super(props);
this.addActiveClass = this.addActiveClass.bind(this);
this.state = {
active: false
};
}
addActiveClass() {
const currentState = this.state.active;
this.setState({ active: !currentState });
}
render() {
return (
<div class="container">
{Array.from({ length: 30 }).map((item, index) => (
<div
key={index}
style={{
background: randomColor(colors),
height: randomHeight(100, 200)
}}
className={this.state.active ? "full" : null}
onClick={this.addActiveClass}
/>
))}
</div>
);
}
}
* {
box-sizing: border-box;
}
body {
margin: 40px;
background-color: #fff;
color: #444;
font: 2em Sansita, sans-serif;
}
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 100vh;
}
.container > * {
border: 2px solid orange;
border-radius: 5px;
margin: 10px;
padding: 10px 20px;
background-color: red;
color: #fff;
}
.full{
width: 100%;
height: 100%;
transition: 2s;
}
codesandbox

Currently you're sharing one state with all of the divs. In order to resolve this problem, create activeIndex state, initialize it with -1 maybe, and use it like:
// ...
class App extends React.Component {
constructor(props) {
super(props);
this.addActiveClass = this.addActiveClass.bind(this);
this.state = {
activeIndex: -1
};
}
addActiveClass(activeIndex) {
this.setState(prev => ({
activeIndex: prev.activeIndex === activeIndex ? -1 : activeIndex
}));
}
render() {
return (
<div className="container">
{Array.from({ length: 30 }).map((item, index) => {
return (
<div
key={index}
style={{
background: randomColor(colors),
height: randomHeight(100, 200)
}}
className={this.state.activeIndex === index ? "full" : ""}
onClick={() => this.addActiveClass(index)}
/>
);
})}
</div>
);
}
}

multi step form arrange display

I have created a multi-step form to be able to create a smooth and easy onboarding.
I am not able to properly display the button and the input/label.
I am looking to get the label and input align left and the button previous and next displayed on the same line but one of the left and one on the right. Also my I reach the latest form, the 'next' button is no more displayed and I show a submit.
The code works, it's just the display arrangement which not good.
This how it looks:
and I am more looking for something like this:
Only the back and Next are not properly dispayed on this image, it should be closer to the input.
Otherwise, it's exactly what I am looking
Label then input (always below the label), and then the buttons below the input and label.
Here is the code:
MasterForm:
import React from 'react';
import ClassCreationFormStep1 from './ClassCreationFormStep1'
import ClassCreationFormStep2 from './ClassCreationFormStep2'
import ClassCreationFormStep3 from './ClassCreationFormStep3'
import ClassCreationFormStep4 from './ClassCreationFormStep4'
import ClassCreationFormStep5 from './ClassCreationFormStep5'
import ClassCreationFormStep6 from './ClassCreationFormStep6'
import ClassCreationFormStep7 from './ClassCreationFormStep7'
import ClassCreationFormStep8 from './ClassCreationFormStep8'
import ClassCreationFormStep9 from './ClassCreationFormStep9'
import ClassCreationFormStep10 from './ClassCreationFormStep10'
import ClassCreationFormStep11 from './ClassCreationFormStep11'
import ClassCreationFormStep12 from './ClassCreationFormStep12'
import ClassCreationFormStep13 from './ClassCreationFormStep13'
import './CreateClassOnBoardingForm.css';
class CreateClassOnBoardingForm extends React.Component {
constructor(props) {
super(props)
// Set the initial input values
this.state = {
currentStep: 1, // Default is Step 1
classTeacherName: '',
classProfilePic: '',
classEmail: '',
className: '',
classAttendeesWillLearn: '',
classMaxClass: '',
classWhatToBring: '',
classWillBe: '',
classLocation: '',
classCost: '',
typeOfClass: '',
classExtra: '',
classPics: '',
}
// Bind the submission to handleChange()
this.handleChange = this.handleChange.bind(this)
this._next = this._next.bind(this)
this._prev = this._prev.bind(this)
}
_next() {
let currentStep = this.state.currentStep
// If the current step is 1 or 2, then add one on "next" button click
currentStep = currentStep >= 12? 13: currentStep + 1
this.setState({
currentStep: currentStep
})
}
_prev() {
let currentStep = this.state.currentStep
// If the current step is 2 or 3, then subtract one on "previous" button click
currentStep = currentStep <= 1? 1: currentStep - 1
this.setState({
currentStep: currentStep
})
}
// Use the submitted data to set the state
handleChange(event) {
const {name, value} = event.target
this.setState({
[name]: value
})
}
// Trigger an alert on form submission
handleSubmit = (event) => {
event.preventDefault()
const { classTeacherName, classProfilePic, classEmail,
className, classAttendeesWillLearn,classMaxClass, classWhatToBring,
classWillBe, classLocation, classCost, typeOfClass, classExtra, classPics } = this.state
alert(`Your registration detail: \n
classTeacherName: ${classTeacherName} \n
classProfilePic: ${classProfilePic} \n
classEmail: ${classEmail} \n
className: ${className} \n
classAttendeesWillLearn: ${classAttendeesWillLearn} \n
classMaxClass: ${classMaxClass} \n
classWhatToBring: ${classWhatToBring} \n
classWillBe: ${classWillBe} \n
classLocation: ${classLocation} \n
classCost: ${classCost} \n
typeOfClass: ${typeOfClass} \n
classExtra: ${classExtra} \n
classPics: ${classPics} \n
`)
window.open("/successfull", "_self") //to open new page
}
get previousButton(){
let currentStep = this.state.currentStep;
// If the current step is not 1, then render the "previous" button
if(currentStep !==1){
return (
<button
className="blue-button"
type="button" onClick={this._prev}>
Previous
</button>
)
}
// ...else return nothing
return null;
}
get nextButton(){
let currentStep = this.state.currentStep;
if(currentStep <13){
return (
<button
className="blue-button"
type="button" onClick={this._next}>
Next
</button>
)
}
// ...else render nothing
return null;
}
render() {
return (
<React.Fragment>
<p>Step {this.state.currentStep} </p>
<form onSubmit={this.handleSubmit}>
<ClassCreationFormStep1
currentStep={this.state.currentStep}
handleChange={this.handleChange}
classTeacherName={this.state.classTeacherName}
/>
<ClassCreationFormStep2
currentStep={this.state.currentStep}
handleChange={this.handleChange}
classProfilePic={this.state.classProfilePic}
/>
....
<ClassCreationFormStep13
currentStep={this.state.currentStep}
handleChange={this.handleChange}
classPics={this.state.classPics}
/>
{this.previousButton}
{this.nextButton}
</form>
</React.Fragment>
)
}
}
export default CreateClassOnBoardingForm;
The Css below is used on the master and child
.blue-button {
border-radius: 21px;
background-color: #14cff0;
border-color: #14cff0;
font-family: Source Sans Pro;
font-size: 13px;
font-weight: bold;
text-align: center;
color: #ffffffff;
box-shadow: 0px 8px 18px 0 rgba(0,0,0,0.14);
padding-top: 5px;
padding-bottom: 7px;
padding-left: 20px;
padding-right: 20px;
}
.label-txt {
font-family: Source Sans Pro;
font-size: 30px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 0.77;
letter-spacing: -0.6px;
text-align: left;
color: #333333;
}
.form-control-village {
font-family: Source Sans Pro;
font-size: 16px;
line-height: 1.6;
text-align: left;
color: #616161;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
background-color: #ffffff;
border-bottom: 3px solid #ff7255;
border-top: 0px none;
border-left: 0px none;
border-right: 0px none;
}
and here is the child form:
1st one:
import React from 'react';
import TextContents from '../../assets/translations/TextContents'
import './CreateClassOnBoardingForm.css';
class ClassCreationFormStep1 extends React.Component {
render() {
if (this.props.currentStep !== 1) { // Prop: The current step
return null
}
return(
<div className="form-group">
<label className="label-txt" htmlFor="classTeacherName">{TextContents.FormClassTeacherName}</label>
<input
className="form-control-village"
id="classTeacherName"
name="classTeacherName"
type="text"
placeholder=""
value={this.props.classTeacherName} // Prop: The email input data
onChange={this.props.handleChange} // Prop: Puts data into state
/>
</div>
)
}
}
export default ClassCreationFormStep1
second one:
import React from 'react';
import TextContents from '../../assets/translations/TextContents'
import './CreateClassOnBoardingForm.css';
class ClassCreationFormStep2 extends React.Component {
render() {
if (this.props.currentStep !== 2) { // Prop: The current step
return null
}
return(
<div className="form-group">
<label className="label-txt" htmlFor="classProfilePic">{TextContents.FormClassProfilePic}</label>
<input
className="form-control-village"
id="classProfilePic"
name="classProfilePic"
type="file"
value={this.props.classProfilePic} // Prop: The email input data
onChange={this.props.handleChange} // Prop: Puts data into state
/>
</div>
)
}
}
export default ClassCreationFormStep2
and the latest one, when submit shows up
import React from 'react';
import TextContents from '../../assets/translations/TextContents'
import './CreateClassOnBoardingForm.css';
class ClassCreationFormStep13 extends React.Component {
render() {
if (this.props.currentStep !== 13) { // Prop: The current step
return null
}
return(
<React.Fragment>
<div className="form-group">
<label className="label-txt" htmlFor="classPics">{TextContents.FormClassPics}</label>
<input
className="form-control-village"
id="classPics"
name="classPics"
type="file"
multiple
value={this.props.classPics} // Prop: The email input data
onChange={this.props.handleChange} // Prop: Puts data into state
/>
</div>
<button
className="blue-button"
type="submit">
{TextContents.SubmitBtn}
</button>
</React.Fragment>
)
}
}
export default ClassCreationFormStep13
Any idea how to make it nice like the latest image I have posted
=====
I am looking to have something like this:

if you want them positioned to the bottom left and right you need to set a height and position: relative
<div className="container>
<button className="backButton>Back</button>
<button className="nextButton>Next</button>
</div>
.container {
height: 200px; // example
width: 200px;
position: relative;
}
.backButton {
position: absolute;
bottom: 0;
left: 0;
}
.nextButton {
position: absolute;
bottom: 0;
right: 0;
}

How to create vertical tab using reactjs and css

Am trying to bulid vertical tab that will function exactly like in the demo link below
sample links from w3schools
here is the screenshot of what am trying to achieve as per the demo sample above
To this effect tried solution found here at but it does not give me what I want as per demo sample above
Stackoverflow link
Now I have decided to go my own way in trying it out.
I have succeeded in displaying the content from an array via reactjs. when user click on each country, the content
of that country gets displayed.
My Problem:
My issue is that I cannot get it to display the content in a vertical tab div as can be seen in the screenshot
Here is the coding so far
import React, { Component, Fragment } from "react";
import { render } from "react-dom";
class Country extends React.Component {
state = { open: false };
toggleOpen = id => {
alert(id);
this.setState(prevState => ({
open: !prevState.open
}));
};
render() {
return (
<React.Fragment>
<div key={this.props.data.id}>
<button onClick={() => this.toggleOpen(this.props.data.id)}>
{this.props.data.name}
</button>
</div>
<div>
{this.state.open && (
<div>
<div>
<b>id: </b>
{this.props.data.id}
</div>
<div>
<b>Info: </b>
{this.props.data.info}
</div>
<div>
<b>Country name:</b> {this.props.data.name}
</div>
content for <b> {this.props.data.name}</b> will appear here..
</div>
)}
</div>
</React.Fragment>
);
}
}
class VerticalTab extends React.Component {
constructor() {
super();
this.state = {
data: [
{ id: "1", name: "London", info: "London is the capital city of England." },
{ id: "2", name: "Paris", info: "Paris is the capital of France." },
{ id: "3", name: "Tokyo", info: "Tokyo is the capital of Japan." }
]
};
}
render() {
return (
<div>
<div>
{this.state.data.map(country => (
<Country key={country.id} data={country} />
))}
</div>
</div>
);
}
}

Is this what you are looking for?
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
currentTab: -1,
data: [
{ id: "1", name: "London" ,info: "London is the capital city of England."},
{ id: "2", name: "Paris" ,info: "Paris is the capital of France." },
{ id: "3", name: "Tokyo" ,info: "Tokyo is the capital of Japan."}
]
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(currentTab) {
this.setState({ currentTab });
}
render() {
return (
<div>
<h2>Vertical Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>
<div className="tab">
{this.state.data.map((button, i) => (
<button key={button.name} className="tablinks" onClick={() => this.handleClick(i)}>{button.name}</button>
)
)
}
</div>
<div className="tabcontent">
{this.state.currentTab !== -1 &&
<React.Fragment>
<h3>{this.state.data[this.state.currentTab].name}</h3>
<p>{this.state.data[this.state.currentTab].info}</p>
</React.Fragment>
}
</div>
</div>
)
}
}
ReactDOM.render( < App / > ,
document.getElementById('root')
);
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}
/* Style the tab */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}
/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
}
<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>
<div id="root" />

React Tabs with Hooks
Here is a link to react tabs. Maybe this will help you.
enter code here