We Keep Coding

event.target in undefined in React <input> component

I am using React. I am trying to dynamically add and remove input fields. I am trying to make a list of objects like
[
{"item": 1, "key": "RAM", "value": "8GB"},
{"item": 1, "key": "Color", "value": "Black"},
{"item": 1, "key": "Used For", "value": "6 months"},
]
There can be any number of objects in the above list. I want to send a post request with the above data. The problem I am facing is creating the above pattern. I want to create an Add button which will show two input fields for the key and value side by side. Then I want to add them to the above list when the user enters the values. Don't worry about the item because it is always the same.Here is a CodeSandBox link. Please expand the browser tab in CodeSandBox to see the full page.
I have done the following:
App.js
import React, { useState } from "react";
import {
SpecificationFormContainer,
SpecificationFormCard,
SpecificationFormTitle,
SpecificationInputRow,
SpecificationValue,
AddMoreButton,
RemoveButton
} from "./Elements";
import "./styles.css";
export default function App() {
const [numberOfSpecFields, setNumberOfSpecFields] = useState(0);
const [specificationKeys, setSpecificationKeys] = useState("");
const [specificationValues, setSpecificationValues] = useState("");
const [specifications, setSpecifications] = useState([]);
const handleSpecKeyChange = (event) => {
setSpecificationKeys(event.target.value);
};
const handleSpecValueChange = (event) => {
setSpecificationValues(event.target.value);
};
const handleFocusOut = (event, index) => {
console.log(event);
if (event.target.value === "") {
console.log("String Empty");
return;
}
};
return (
<SpecificationFormContainer>
<SpecificationFormCard>
<SpecificationFormTitle>Add Specifications</SpecificationFormTitle>
<form>
{[...Array(numberOfSpecFields)].map((e, index) => {
return (
<SpecificationInputRow key={index}>
<SpecificationValue
placeholder="Key"
onChange={handleSpecKeyChange}
name="key"
onBlur={() => {
handleFocusOut(index);
}}
/>
<SpecificationValue
placeholder="Value"
onChange={handleSpecValueChange}
name="value"
onBlur={() => {
handleFocusOut(index);
}}
/>
</SpecificationInputRow>
);
})}
</form>
<AddMoreButton
onClick={() => {
setNumberOfSpecFields((prev) => prev + 1);
}}
>
Add
</AddMoreButton>
{numberOfSpecFields > 0 && (
<RemoveButton
onClick={() => {
setNumberOfSpecFields((prev) => prev - 1);
}}
>
Remove
</RemoveButton>
)}
</SpecificationFormCard>
</SpecificationFormContainer>
);
}
Elements.js
import styled from "styled-components";
export const SpecificationFormContainer = styled.div`
width: 100%;
border: 2px solid blue;
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
`;
export const SpecificationFormCard = styled.div`
background-color: rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/* min-height: 15em; */
min-width: 50em;
`;
export const SpecificationFormTitle = styled.div`
width: 100%;
font-size: large;
text-align: center;
`;
export const SpecificationInputRow = styled.div`
width: 100%;
display: flex;
justify-content: center;
`;
export const SpecificationValue = styled.input`
width: 40%;
padding: 0.5em;
margin: 0.5em;
`;
export const AddMoreButton = styled.button`
width: 7em;
`;
export const RemoveButton = styled.button`
width: 7em;
`;
In the handleFocusOut function, the event is 0. I was thinking of making an object with the key value pair in the handleFocusOut function based on the index as the key and value input pair have the same index.
I want to know why this does not work and how to make it work. There is most likely a better way to do this as this approach probably is not the best since I am only just a beginner. So, if there is a better way to achieve this, I want to know that.

In the handleFocusOut function, the event is 0.
It's 0 because you are passing index as an argument and ignoring the event. You could use a curried function to accept the event and index as well.
const handleFocusOut = (index) => (event) => {
// do stuff
};
onBlur={handleFocusOut(index)}
or add a function directly in JSX:
onBlur={(event) => handleFocusOut(event, index)}

React.js - How to check if the div is at the bottom of the screen (dynamically)

Is there any way to check if the div is at the bottom of the another div (acting as a parent, or container).
What I tried
So basically I made demo where there are child elements (items, setItems) in the div that can be added and deleted and also you can change the height of them by clicking on the divs (important here). Also there is another div, which is not in the items state, where I want to change the title of that item, if it is at the bottom of the his parent div (also items have the same parent as this div has).
Problem with my solution
I have tried something where I am looking at the getBoundingClientRect() of the parent container and this "blue" div, lets call it like that, and it will work fine, ONLY IF the items have the same height, but soon as a delete the one item and change the height of it by clicking on the div, it will not work. It will show that it is on the bottom of the screen (the title will be true) but in reality it is not.
My code
App.js - only for demo purposes
import "./styles.css";
import { useState, useEffect, useRef } from "react";
export default function App() {
const arrayItems = [
{
id: 1,
name: "test",
resized: false
},
{
id: 2,
name: "test1",
resized: false
},
{
id: 3,
name: "test2",
resized: false
}
];
const [items, setItems] = useState(arrayItems);
const [title, setTitle] = useState(false);
const parentRef = useRef(null);
const itemsRef = useRef(null);
useEffect(() => {
if (
parentRef?.current.getBoundingClientRect().bottom -
itemsRef?.current.getBoundingClientRect().height <=
itemsRef?.current.getBoundingClientRect().top
) {
setTitle(true);
} else {
setTitle(false);
}
}, [parentRef, items]);
const handleClick = () => {
const maxValue = Math.max(...items.map((item) => item.id)) + 1;
setItems((prev) => [
...prev,
{ id: maxValue, name: "testValue", resized: false }
]);
};
const handleDelete = () => {
setItems((prev) => prev.slice(0, prev.length - 1));
};
const handleResize = (item) => {
setItems((prev) =>
prev.map((itemOld) => {
if (itemOld.id === item.id) {
return itemOld.resized === true
? { ...itemOld, resized: false }
: { ...itemOld, resized: true };
} else {
return itemOld;
}
})
);
};
console.log(items);
return (
<div className="App">
<button onClick={handleClick}>Add new</button>
<button onClick={handleDelete}>Delete last</button>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<div ref={parentRef} className="container">
{items?.map((item) => {
return (
<div
onClick={() => handleResize(item)}
style={{ height: item.resized ? "70px" : "20px" }}
key={item.id}
className="container-item"
>
<p>{item.name}</p>
</div>
);
})}
<div ref={itemsRef} id="title-div">
{title ? "At the bottom" : "Not at the bottom"}
</div>
</div>
</div>
);
}
styles.css
.App {
font-family: sans-serif;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 1rem;
}
* {
margin: 0;
padding: 0;
}
.container {
width: 600px;
height: 300px;
background-color: gray;
display: flex;
flex-direction: column;
}
.container-item {
width: 100%;
background-color: hotpink;
}
#title-div {
width: 100%;
padding: 1rem;
background-color: blue;
color: white;
}
What I want to make
As the title suggest I want to see if the div is at the bottom of the container/parent div. That is it, and other items in that parent div, cannot interfere with this div, in sense that adding, resizing, deleting those items, will not suddenly change the position of the div that I want to analyse (to see if it is at the bottom of the screen)

I have come up with my own solution and it works always. I just have to deduct the "top" from parentsRef and "top" from the itemsRef, and add to that the clientHeight of the itemsRef. This way it will always be at the bottom of the container, doesnt matter if I delete the items, resize them etc.
The code
useEffect(() => {
if (
parentRef?.current.clientHeight <=
itemsRef?.current.getBoundingClientRect().top -
parentRef?.current.getBoundingClientRect().top +
itemsRef?.current.clientHeight
) {
setTitle(true);
} else {
setTitle(false);
}
}, [parentRef, items, itemsRef]);

How to pass two state variables into the same React useState? - Array & Integer

Working on an e-commerce store project where I have a Slider component.
I am fetching my own JSON data from a localhost server & mapping over the array for each slide.
My goal is to find a way to use the same useState() to render the items onto the page & click a button to move to the next slide.
I have tried to do something like useState([], 0)
One for my array & another one to change index on button click however this did not work lol...
The array is of course for the data to be displayed however the tricky part for me is figuring out a way to move to the next page.
I am trying to use transform:translateX in my Wrapper styled component and attempting to pass props in so I can change the slide to the next slide and still render the data on the page.
How can I go about using state in this way described above based on my code?
*** Before reading the code snippets, my current code shows that I have tried creating two states, and passing the second state with my integer into my fetch request, no errors pop up but it doesn't work obviously as it doesn't have an array of items to index through.
In the code snippet I have included the code for the entire slider & also the information inside my data.json file.
import {useState, useEffect} from 'react';
import { ArrowLeftOutlined, ArrowRightOutlined } from "#material-ui/icons";
import styled from "styled-components";
const Container = styled.div`
width: 100%;
height: 95vh;
display: flex;
// background-color: #b3f0ff;
position: relative;
overflow: hidden;s
`;
const Arrow = styled.div`
width: 50px;
height: 50px;
background-color: #e6ffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
bottom: 0;
left: ${props => props.direction === "left" && "10px"};
right: ${props => props.direction === "right" && "10px"};
margin: auto;
cursor: pointer;
opacity: 0.5;
z-index: 2;
`;
const Wrapper = styled.div`
height: 100%;
display: flex;
transform: translateX({props => props.arrowIndx * -100}vw);
`
const Slide = styled.div`
width: 100vw;
height: 100vw;
display: flex;
align-items: center;
background-color: ${props => props.bg};
`
const ImgContainer = styled.div`
height: 100%;
flex:1;
`
const Image = styled.img`
padding-left: 30px;
align-items: left;
`
const InfoContainer = styled.div`
height: 80%;
flex:1;
padding: 30px;
`
const Title = styled.h1`
font-size: 50px
`
const Desc = styled.p`
margin: 50px 0px;
font-size: 20px;
font-weight: 500;
letter-spacing: 3px;
`
const Button = styled.button`
padding: 10px;
font-size: 20px;
background-color: transparent;
cursor: pointer;
`
const Slider = () => {
const [slideIndx, setSlideIndx] = useState([]);
const [arrowIndx, setArrowIndx] = useState(0);
const handleClick = (direction) => {
if(direction === "left"){
setArrowIndx(arrowIndx > 0 ? arrowIndx - 1 : 2)
} else{
setArrowIndx(arrowIndx < 2 ? arrowIndx + 1 : 0)
}
}
const fetchSliderItems = () => {
fetch('http://localhost:3000/sliderItems')
.then(resp => resp.json())
.then(data => {
console.log(data)
setArrowIndx(data)
setSlideIndx(data)
})
}
useEffect(() => {fetchSliderItems()}, [])
return (
<Container>
<Arrow direction="left" onClick={() => handleClick("left")}>
<ArrowLeftOutlined />
</Arrow>
<Wrapper arrowIndx={arrowIndx}>
{slideIndx.map((item) => (
<Slide bg={item.bg}>
<ImgContainer>
<Image src={item.img}/>
</ImgContainer>
<InfoContainer>
<Title>{item.title}</Title>
<Desc>{item.desc}</Desc>
<Button>SHOP NOW</Button>
</InfoContainer>
</Slide>
))}
</Wrapper>
<Arrow direction="right" onClick={() => handleClick("right")}>
<ArrowRightOutlined />
</Arrow>
</Container>
)
}
export default Slider
{
"sliderItems": [
{
"id": 1,
"img": "../images/model1.png",
"title": "SPRING CLEANING",
"desc": "DONT MISS OUR BEST COLLECTION YET! USE #FLATIRON10 TO RECEIVE 10% OFF YOUR FIRST ORDER",
"bg": "#b3ecff"
},
{
"id": 2,
"img": "../images/model2.png",
"title": "SHOW OFF HOW YOU DRESS",
"desc": "WITH OUR HUGE SELECTION OF CLOTHES WE FIT ALL YOUR STYLING NEEDS",
"bg": "#ccf2ff"
},
{
"id": 3,
"img": "../images/model3.png",
"title": "POPULAR DEALS",
"desc": "RECEIVE FREE SHIPPING ON ALL ORDERS OVER $50!",
"bg": "#fe6f9ff"
}
]
}

if you want to use 2 data at 1 use state you have 2 way to achieve that
store data as cell of array like below.
const [data,setData] = useState([1,2])
console.log(data[1])
set data as Object in useState
const [data,setData] = useState({data1: 1, data2: 2 })
but i suggest you to use second approach because it's easy to use.
one point you must have care about it in this approach is, if you want to update state with object-state you have to update state with deep copy and then react can re-render component
for example if you want to update data2 in object of state you have to dod this
const [data,setData] = useState({data1: 1, data2: 2 })
setData((prevState) => ({
...prevState,
data2: 'value',
}));
white this snippet you will get update data2 and react get re-render
in your case if you want save array and update it and if you want get re-render when pass new array you have to clone new array and pass it into useState and you can archive this with spread operator in JavaScript.
Example:
setData((prevState) => ({
...prevState,
data2: [...newArray],
}));
if you pass newArray instead of [...newArray] you just pass the reference of memory if array into state and if after setState you change newAereay at the rest of code your state will update to and you don't want this.

radio group buttons using ant design dont work

I am experiencing some issues with radio group buttons. Can someone help me with this issue. (your help is much appreciated)
Current Issue: Radio Group are not clickable. Im not sure where I missed up!
Technologies Used: React hooks, styled-components , and design
for the radio buttons.
RadioGroup.js
import React from "react";
import { Radio } from "antd";
import styled from "styled-components";
import { theme } from "constants/theme";
const { royalBlue, black } = theme.colors;
const { medium } = theme.typography.size;
const { display } = theme.typography.font.family;
const StyledRadioGroup = styled(Radio.Group)`
width: 100%;
margin-top: 0.5rem;
text-align: left;
.ant-radio-wrapper {
justify-content: space-between;
padding: ${(props) => props.padding};
white-space: break-spaces;
margin-left: -1.5rem;
span.ant-radio + * {
font-family: ${display};
font-size: ${medium};
color: ${black};
letter-spacing: 0;
}
.ant-radio-inner {
border-color: ${royalBlue};
border-width: 0.2rem;
width: 2.5rem;
height: 2.5rem;
&::after {
background-color: ${royalBlue};
top: 0.2rem;
left: 0.2rem;
}
}
}
`;
const RadioGroup = ({
options,
onChange,
value,
defaultValue,
flex,
padding,
}) => {
return (
<StyledRadioGroup
size="large"
flex={flex}
padding={padding}
onChange={onChange}
value={value}
defaultValue={defaultValue}
>
{options.map((option, index) => (
<Radio value={option.stateKey} key={index}>
{option.value}
</Radio>
))}
</StyledRadioGroup>
);
};
export default RadioGroup;
Navigation.js
import React, { useState, useReducer } from "react";
import styled from "styled-components";
import RadioModal from "components/Feedback/RadioModal";
import RadioGroup from "components/Feedback/RadioGroup";
const renderRadioModal = () => {
const inputLabelsText = [
{
stateKey: "age",
label: "What is your age?",
},
];
const radioButtonOptions = [
{
stateKey: "covidImpact",
value: "I go to work/school normally",
},
{
stateKey: "covidImpact",
value: "I am healthy but in a stay-at-home quarantine",
},
{
stateKey: "covidImpact",
value: "I have mild symptoms but haven't been tested",
},
{
stateKey: "covidImpact",
value: "I am diagnosed with Covid-19",
},
];
const RadioGroupWithLabel = withLabel(() => (
<RadioGroup
onChange={true}
options={radioButtonOptions}
value={true}
padding="1rem 1rem"
size="large"
></RadioGroup>
));
return (
<RadioModal
maskClosable={true}
closable={true}
visible={radioModal}
onClose={() => closeRadioModal()}
transparent
>
<h2 className="title">We are almost done!</h2>
{inputLabelsText.map((label, index) => (
<>
<StyledInput
key={index}
label={label.label}
value={label.stateKey}
onChange={dispatchAction}
></StyledInput>
<RadioGroupWithLabel label={"How has COVID-19 impacted you?"} />
</>
))}
<FeedbackSubmitButton
title="Submit Feedback"
onClick={closeRadioModal}
></FeedbackSubmitButton>
</RadioModal>
);
};

You have onChange={true} and value={true}. You need to handle the onChange and value properly. The value prop needs to match the value in your options that you pass into the radio group.
The options you pass in should be in the structure [{ value, label }, { value, label }]
Then in your onChange you need to handle setting that value + have a place to store it

how can i display round dot for active status in react

In older code of react it just display the text active or in active for an user. Now I want to replace it to red or green small dot how can I do it.

CSS
div .colored-circle {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
margin-bottom: -2px;
border-radius: 50%;
border-style: solid;
border-width: 0.5px;
border-color: black;
height: 20px;
width: 20px;
}
Component:
const ColoredCircle = ({ color }) => {
const styles = { backgroundColor: color };
return color ? (
<Fragment>
<span className="colored-circle" style={styles} />
</Fragment>
) : null;
};
export default ColoredCircle;

Use the same logic you used to show 'active' or 'inactive' and instead of text add a div with css or img of the desired color.

If you happen to use material UI, you can do like this:
import React, { Fragment } from "react";
import { makeStyles } from "#material-ui/core";
const RADIUS_DOT = 1.5;
const useStyles = makeStyles((theme) => ({
circle: {
borderRadius: RADIUS_DOT,
height: RADIUS_DOT * 2,
width: RADIUS_DOT * 2,
padding: 0,
},
}));
const ColoredCircle = ({ color }) => {
const styles = { backgroundColor: color };
const classes = useStyles();
return color ? (
<Fragment>
<span className={classes.circle} style={styles} />
</Fragment>
) : null;
};
export default ColoredCircle;

you can use this package, can be helpful
npm i react-color-circle
import Circle from '#uiw/react-color-circle';
return (
<Circle
colors={[ '#F44E3B' ]}
/>);