Develop Reference

Toggle state taking previous value in react?

I am trying to create a to-do list app. The basic functionality includes adding and deleting. So when a user selects one or multiple items, a delete button will appear and it will be deleted. My problem is I am implementing a toggle state which when a user clicks on todo item, it will be strikethrough( A strikethrough text decoration will be added via CSS).
The problem arises when I add two items. When I click on the first item , it gets a strike through and when I delete it, the first one goes but the second item gets the strike through this time.
The running sample in codesandbox. Just try adding two items and delete the first one. The second one also gets a strike through.
I believe its because the toggle state value is being remembered.
This is the Content.js component
import "./styles/content.css";
import Individual from "./Individual";
import { useEffect, useState } from "react";
import { updateItem, markIncomplete } from "./action/action";
const Contents = (props) => {
const items = useSelector((state) => state.todoReducer.items);
const dispatch = useDispatch();
const handleClick = (e, isComplete, content, id) => {
// console.log(isComplete);
if (isComplete === false) {
//evaluates false to true
const newobj = {
isComplete: true,
content,
id
};
dispatch(updateItem(newobj));
props.deletebutton(true);
} else {
const falseobj = {
isComplete: false,
content,
id
};
dispatch(markIncomplete(falseobj));
}
};
useEffect(() => {
console.log("statechanging of contents");
});
return (
<div className="content-ui">
<div>
{items.map((vals) => (
<Individual
vals={vals}
deletebutton={props.deletebutton}
handleClick={handleClick}
/>
))}
</div>
</div>
);
};
export default Contents;
This is the individual.js which deals with toggle function
import { useDispatch, useSelector } from "react-redux";
import "./styles/content.css";
import { updateItem, markIncomplete } from "./action/action";
const Individual = (props) => {
console.log("child" + props.vals.isComplete);
const [toggle, isToggled] = useState(false);
const handleToggle = () => {
const mytoggle = !toggle;
isToggled(mytoggle);
};
return (
<div>
<div
className={toggle ? "toggled" : "card-elements"}
onMouseDown={handleToggle}
onClick={(e) => {
props.handleClick(
e,
props.vals.isComplete,
props.vals.content,
props.vals.id
);
handleToggle;
}}
>
{props.vals.content}
</div>
</div>
);
};
export default Individual;
Css of toggler
.toggled {
/* border: 1px solid rgb(94, 94, 94); */
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
text-align: left;
box-sizing: border-box;
padding: 10px 3px 10px 7px;
margin-top: 4px;
margin-bottom: 8px;
border-radius: 5px;
background-color: white;
font-size: 12px;
font-family: "Roboto ", monospace;
text-decoration: line-through;
}
.card-elements {
/* border: 1px solid rgb(94, 94, 94); */
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
text-align: left;
box-sizing: border-box;
padding: 10px 3px 10px 7px;
margin-top: 4px;
margin-bottom: 8px;
border-radius: 5px;
background-color: white;
font-size: 12px;
font-family: "Roboto ", monospace;
}

You need to add keys to your mapped items (there should also be a warning about this in the console).
Keys help React identify which items have changed, are added, or are removed.
As is stated from React's documents.
return (
<div className="content-ui">
<div>
{items.map((vals) => (
<Individual
key={vals.id} // <-- add unique key
vals={vals}
deletebutton={props.deletebutton}
handleClick={handleClick}
/>
))}
</div>
</div>
);

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>
}
</>

Correctly positioning a Modal without restructuring code React

I have a class InventoryView which displays a list of stock items and is defined as follows :
class InventoryView extends Component {
...
render() {
...
{
consumableItemsArray.map((row, key) =>
<Item item={row} key={row.id} />
)}
...
}
}
The class Item is basically every stock in the list of stock items and is defined as follows :
class Item extends Component {
...
render() {
...
return (
<HorizontalRow>
...
<EditAStockItem></EditAStockItem>
</HorizontalRow>
)
}
The class EditAStockItem is basically an edit button which when clicked should display a Modal and is defined as follows :
class EditAStockItem extends Component {
constructor(props) {
super(props)
this.state = { isShowingInventoryUpdationModal: false }
}
editStockItem = event => {
event.preventDefault()
this.setState({ isShowingInventoryUpdationModal: true })
}
openInventoryUpdationHandler = () => {
console.log('Inside openInventoryUpdationHandler')
this.setState({
isShowingInventoryUpdationModal: true
});
}
closeInventoryUpdationHandler = () => {
this.setState({
isShowingInventoryUpdationModal: false
});
}
render() {
const { isShowingInventoryUpdationModal } = this.state
if(!isShowingInventoryUpdationModal)
return <EditStockItemButton onClick={this.editStockItem}><i class="fa fa-edit" aria-hidden="true"></i></EditStockItemButton>
else
{
return (
<div>
{ this.state.isShowingInventoryUpdationModal ? <div onClick=
{this.closeInventoryUpdationHandler}></div> : null }
<UpdateStockItemModal
className="modal"
show={this.state.isShowingInventoryUpdationModal}
close={this.closeInventoryUpdationHandler}>
Please insert a client name :
</UpdateStockItemModal>
</div>
)}
}
}
openInventoryUpdationHandler and closeInventoryUpdationHandler set the state of the variable isShowingInventoryUpdationModal which becomes true when the edit button is clicked. When the variable isShowingInventoryUpdationModal becomes true, a modal opens up and takes the place of the edit button thereby skewing the whole page up. I want the Modal to be on top of the entire page like a Modal does. Is there any way I can do this without changing the current structure of my code?
The Modal is defined as follows :
class UpdateStockItemModal extends Component {
constructor(props) {
super(props)
this.state = {
show : props.show,
close : props.close,
children : props.children,
}
}
prepareComponentState (props) {
var usedProps = props || this.props
this.state = {
show : usedProps.show,
close : usedProps.close,
children : usedProps.children,
}
}
componentWillReceiveProps = async (nextProps) => {
this.prepareComponentState(nextProps)
}
componentWillMount = async (props) => {
this.prepareComponentState()
}
render() {
var { stockName, totalQuantity, show, close, children } = this.state
return (
<div>
<div className="modal-wrapper"
style={{
transform: show ? 'translateY(0vh)' : 'translateY(-100vh)',
opacity: show ? '1' : '0'
}}>
<div className="modal-header">
<h3>Update Stock Item</h3>
<span className="close-modal-btn" onClick={close}>×</span>
</div>
<FormContainer>
<InputStockNameContainer>
<p>Enter Stock Name</p>
<InputText
type="text"
value={ stockName }
onChange={this.handleChangeInputStockName}
/>
</InputStockNameContainer>
<InputTotalQuantityContainer>
<p>Enter Total Quantity</p>
<InputText
type="text"
value={ totalQuantity }
onChange={this.handleChangeInputTotalQuantity}
/>
</InputTotalQuantityContainer>
</FormContainer>
<div className="modal-footer">
<button className="btn-cancel" onClick={close}>CLOSE</button>
<button className="btn-continue" onClick = {this.handleIncludeClient}>CONTINUE</button>
</div>
</div>
</div>
)
}
}
export default UpdateStockItemModal;

You can fix this whole thing with css, by having the modal with position fixed and to sit on top by using z-index.
Here you have my demo of a simple modal:
.modal {
position: fixed; /* Stay in place */
z-index: 1000; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>

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

Reactjs hover and display questions

I am developing a text based web game using react.
I have an ItemDisplay class which displays bunch of Item classes, each representing an item.
I used a lot of react-bootstrap to deal with modal and tooltip, but there are still some of the issues I haven't been able to solve.
Here's a screenshot of the ItemDisplay:
https://imgur.com/a/NUtFFsL
ItemDisplay code
ItemDisplay
class ItemDisplay extends Component {
constructor(props) {
super(props);
this.state = {
show: false
}
}
render() {
// items attributes are in object that looks like: {name: 'sword', desc: 'a stupid sword', atk: 8, dex: 1}, {name: 'shield', desc: 'a stupid shield', def: 1}];
let items = Object.keys(this.props.items).map(item => <Item key={this.props.items[item].name} show={this.state.show} attri={this.props.items[item]}></Item>);
return (
<div className='item-list'>
{items}
</div>
)
}
}
export default ItemDisplay;
and Item class
class Item extends Component {
constructor(props) {
super(props);
this.state = {
show: false
};
this.handleHoverOn = this.handleHoverOn.bind(this);
this.handleHoverOff = this.handleHoverOff.bind(this);
}
handleHoverOn() {
this.setState({show: true});
}
handleHoverOff() {
this.setState({show: false});
}
toTitle = (word) => {
return word.charAt(0).toUpperCase() + word.slice(1);
}
render() {
let attributes = Object.keys(this.props.attri).map((key) => <p>{this.toTitle(key)}: {this.props.attri[key]}</p>)
return (
<div className='aux'>
<OverlayTrigger key={this.props.attri.name} placement='top' className='item'
overlay={<Tooltip id={attributes.name}>{attributes}</Tooltip>}>
<p>{this.props.attri.name}</p>
</OverlayTrigger>
</div>
)
}
}
export default Item;
Here are my problems:
As you can see from the screenshot, I cannot wrap Sword of A Thousand Truths within that box. I don't know if that's because I have a div wrapping the OverlayTrigger
As of now, hovering over the name of the items (only the words) will display the attributes (atk ,def, etc.) in a Tooltip, but I want to be able to hover over the entire box instead of the words only to have the same effects. Is there a way to do it?
EDIT: Think I should add my css as well
ItemDisplay.css
.item-list {
height: 100%;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
padding-left: 0;
}
.overlay {
height: 100%;
broder: 1px solid black;
}
Item.css
.item {
word-wrap: break-word;
}
.aux {
display: inline-block;
height: 100%;
width: 100px;
border: 1px solid;
border-radius: 5px;
margin: 2px 2px 2px 2px;
text-align: center;
top: 50%;
}
.equip {
border: 2px solid #267f0b;
font-weight: bold;
}