We Keep Coding

How can I return state separately when I use redux and array?

I'm trying to implement like function by using redux and map function to use states in other components. I used redux not using useState([]) because I thought it is better way to manage states. I made the button changed when button is clicked. But they are sharing same state so it is changed at the same time. To solve this problem, I think I should add this state in array. And here comes my question. How can I add state declared in redux to manage state separately? And is this way correct? I'll upload concrete code including redux by using codesandbox. I'd appreciate it if you let me know, thanks.
Clothes
import React, { useState } from "react";
import styled from "styled-components";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import { faHeart } from "#fortawesome/free-solid-svg-icons";
import { faHome } from "#fortawesome/free-solid-svg-icons";
import { useDispatch, useSelector } from "react-redux";
const array = [
{
id: "1",
name: "vest",
img:
"https://shopimg.kakaofriendsgolf.com/live/images/2022/9/7/10/918997_1662515279620.png",
price: "10000"
},
{
id: "2",
name: "shirts",
img:
"https://shopimg.kakaofriendsgolf.com/live/images/2022/8/23/18/551886_1661246483199.png",
price: "12000"
},
{
id: "3",
name: "pants",
img:
" https://shopimg.kakaofriendsgolf.com/live/images/2022/8/22/18/18783_1661159105201.png",
price: "15000"
}
];
export default function Clothes() {
const isClick = useSelector((state) => state.CheckLike.isClick);
const dispatch = useDispatch();
// change Icon
const setHide = (e) => {
dispatch({ type: "False" });
};
const setShow = (e) => {
dispatch({ type: "True" });
};
return (
<Wrap>
<div className="productCard">
{array.map((content, idx) => {
return (
<div key={idx} className="productCard__wrap">
<img src={content.img} className="productCard__img" />
<div className="productCard__name">
<div>
<h3 className="productCard__title">{content.name}</h3>
<div className="productCard__priceWrap">
{content.price
.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
</div>
</div>
<div className="productCard__likeWrap">
{/* show heart and house icon according to state */}
{isClick ? (
<div
onClick={() => {
setHide();
}}
>
<FontAwesomeIcon icon={faHeart} />
</div>
) : (
<div
onClick={() => {
setShow();
}}
>
<FontAwesomeIcon icon={faHome} />
</div>
)}
</div>
</div>
</div>
);
})}
</div>
</Wrap>
);
}
const Wrap = styled.div`
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: scroll;
.productCard {
display: flex;
position: absolute;
top: calc(50vh - 120px);
left: calc(50vw - 180px);
width: "228px";
height: "351px";
padding-right: 8px;
padding-left: 8px;
border: solid 1px black;
}
.productCard__wrap {
border: 1px solid grey;
line-height: 1.428571429;
background-color: #fff;
}
.productCard__img {
width: 228px;
height: 228px;
}
.productCard__name {
padding-bottom: 30px;
position: relative;
padding: 8px 8px 0 8px;
min-height: 118px;
text-align: left;
}
.productCard__title {
font-size: 18px;
margin-top: 0;
margin-bottom: 2px;
padding-right: 37px;
line-height: 1.3;
margin-block-start: 1em;
margin-block-end: 1em;
}
.productCard__priceWrap {
font-size: 18px;
margin-top: 5px;
vertical-align: middle;
margin: 0 0 9px;
margin-block-start: 1em;
margin-block-end: 1em;
text-align: left;
}
.productCard__likeWrap {
position: absolute;
top: -5px;
right: 0;
padding: 0;
height: 40px;
line-height: 37px;
white-space: normal;
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
}
`;
codesandbox
https://codesandbox.io/s/likepractice-tpcv7l?file=/src/components/Clothes.jsx

There could be many approaches, but assuming that the goal is to make the like button work for individual items and save the liked items in the store, I think the solution of using an array as a state is suitable in the use case.
Forked demo with modification: codesandbox
Configure the state as an array and create matching reducers, here the product id is saved to the state array when liked, but this is an optional approach.
const initailState = {
isClick: [],
};
const CheckLike = (state = initailState, action) => {
switch (action.type) {
case "True":
return {
...state,
isClick: [...state.isClick, action.id],
};
case "False":
return {
...state,
isClick: state.isClick.filter((id) => id !== action.id),
};
default:
return {
...state,
};
}
};
Edit the event handler to dispatch the item id to be added or removed from the state array:
const setHide = (id) => {
dispatch({ type: "False", id });
};
const setShow = (id) => {
dispatch({ type: "True", id });
};
Check if product id content.id is included in the state array as a condition for rendering the icons, and wire up the icons to send content.id to the events:
<div className="productCard__likeWrap">
{isClick.includes(content.id) ? (
<div
onClick={() => {
setHide(content.id);
}}
>
<FontAwesomeIcon icon={faHeart} />
</div>
) : (
<div
onClick={() => {
setShow(content.id);
}}
>
<FontAwesomeIcon icon={faHome} />
</div>
)}
</div>

if I'm guessing correctly your problem is that the button click changes all the buttons.
for this issue, you don't need redux. use redux when you want to manage a global state used in multiple components(ex, session).
solution for your problem is, create a new component for each product card and there manage the state of the button.
and to store which products are on the wishlist you can store that in redux.

React onClick not responding

I am a newbie in react. I am not so sure why this onClick event is not responding. I am trying render a modal when icon is clicked for some reasons I am the onClick event is not responding. I have tried it in 2 ways
onClick = {()=> {handleEdit()}
onClick = {handleEdit}
I am using this NoteWidget in another component called customerProfile is I dont know if that is creating any issue.
import React from 'react'
import './Notewidget.scss'
import AddCircleIcon from '#mui/icons-material/AddCircle';
import {List, Skeleton,Divider,Modal,Input} from 'antd';
import InfinteScroll from 'react-infinite-scroll-component';
import {useState} from 'react';
const Notewidget = () => {
const [isEditing,setIsEditing] = useState(false);
const handleEdit = () => {
console.log('button clicked');
setIsEditing(true);
}
return (
<div className='notes'>
<div className='heading'>
<h3 className='title'>NOTES</h3>
<div className='icon'><AddCircleIcon onClick={() => {handleEdit()}}/></div>
</div>
<div className='list'
style={{
overflow:'auto',
padding:'0px px',
width:400,
height:543
}}
>
<InfinteScroll
dataLength={data.length}
next={data}
size='large'
hasMore={data.length < 5}
loader={
<Skeleton
avatar
paragraph={{
rows:1,
}}
active
/>
}
endMessage={<Divider plain>Add Note</Divider>}>
<List
itemLayout="horizontal"
dataSource={data}
renderItem={(item)=>(
<List.Item>
<List.Item.Meta
title={item.title}
description={item.description}
/>
</List.Item>
)}
/>
</InfinteScroll>
</div>
<Modal
visible={isEditing}>
</Modal>
</div>
)
}
export default Notewidget
when I am clicking on the border next to notes it is working the modal is popping up
#import "antd/dist/antd.css";
.notes{
flex:1;
margin-right: 20px;
gap: 20px;
padding: 10px;
justify-content: space-between;
height: 650px;
-webkit-box-shadow: 2px 4px 10px 1px rgba(0,0,0,0.47);
box-shadow: 2px 4px 10px 1px rgba(201,201,201,0.47);
background-color: white;
.heading{
display: flex;
justify-content: space-between;
h3{
padding: 20px;
.title{
font-size: 14px;
font-weight:bolder;
line-height: 1.2;
text-transform: uppercase;
color: rgb(50, 51, 50);
margin: 0px 0px 20px;
}
}
.icon{
padding-top: 16px;
padding-left: 265px;
}
}
.list{
padding: 10px;
}
}

There are couple of things -
did you check the console log in developer mode?
Yes, the way you have told to invoke the functions are connect but there is more to it. for time-being if you are not passing any parameters to function then you should use the 2nd way [ onClick = {handleEdit}]
3.since you have attached your handler to mui Icon, that might be the reason. try putting the onClick to parent of icon i.e div like this -
<div className='icon' onClick={handleEdit}><AddCircleIcon/></div>
4.please try put some playground link (JS fiddle/codeSandbox) so that anyone can try doing changes in code.

Converting string to DOM node (ul/li) in JavaScript with appendchild

I am trying to make use of createElement, createTextNode and appendChild to rewrite an outdated simple to-do list code example.
The code example requires the use of the array join() method so, unfortunately, this can't be removed. The old version just wrote the HTML for the ul list in code fragments.
I am unsure how to proceed where I have entered to comment at line 30 of the js: " need to render the tasks (from stringToInsert) as a list to div id="output" here "
I have referred to the following stackoverflow articles to help me rewrite the code:
js-how-to-concatenate-variables-inside-appendchild -This example uses join() and appendChild but not list items.
create-ul-and-li-elements-in-javascript-
From that one, I copied the code from a Fiddle and put it into function createul() in my example codepen
Once I have the function addTask() working createul() and it's associated HTML elements (such as the render list button) will be removed.
// tasks.js #2
// This script manages a to-do list.
// Need a global variable:
var tasks = [];
function addTask() {
'use strict';
console.log("addTask started");
// Get the task:
var task = document.getElementById('task');
// Reference to where the output goes:
var output = document.getElementById('output');
if (task.value) {
tasks.push(task.value);
// Update the page:
//var message = '<h2>To-Do</h2>';
var stringToInsert = tasks.join(' : ');
console.log(stringToInsert);
var taskUl = document.createElement('ul');
taskUl.setAttribute('id', 'autoTask');
document.getElementById('output').appendChild(taskUl);
/* need to render the tasks (from stringToInsert) as a list to div id ="output" here */
document.getElementById("task").value = '';
}
// Return false to prevent submission:
return false;
} // End of addTask() function.
function createul() {
var ul = document.createElement('ul');
ul.setAttribute('id', 'proList');
var t, tt;
productList = ['Electronics Watch', 'House wear Items', 'Kids wear', 'Women Fashion'];
document.getElementById('renderList').appendChild(ul);
productList.forEach(renderProductList);
function renderProductList(element, index, arr) {
var li = document.createElement('li');
li.setAttribute('class', 'item');
ul.appendChild(li);
t = document.createTextNode(element);
li.innerHTML = li.innerHTML + element;
}
}
function init() {
document.getElementById('renderbtn').addEventListener("click", createul);
document.getElementById('theForm').onsubmit = addTask;
}
window.addEventListener('load', init);
/* css (I have simplified this a little for this example and I am sorry I haven't cut it down further) */
form {
margin: 0 auto;
width: 400px;
padding: 14px;
background-color: #ffffff;
border: solid 2px #425955;
}
/* ----------- stylized ----------- */
h1 {
font-size: 14px;
font-weight: bold;
margin-bottom: 8px;
}
p {
font-size: 11px;
color: #666666;
margin-bottom: 20px;
border-bottom: solid 1px #BFBD9F;
padding-bottom: 10px;
}
label {
display: block;
font-weight: bold;
text-align: right;
width: 140px;
float: left;
}
select {
float: left;
font-size: 12px;
padding: 4px 2px;
border: solid 1px #BFBD9F;
width: 200px;
margin: 2px 0 20px 10px;
}
input {
float: left;
font-size: 12px;
padding: 4px 2px;
border: solid 1px #BFBD9F;
width: 200px;
margin: 2px 0 20px 10px;
}
#submit {
clear: both;
margin-left: 150px;
width: 125px;
height: 31px;
background: #F1F2D8;
text-align: center;
line-height: 20px;
color: #000000;
font-size: 12px;
font-weight: bold;
}
#output {
clear: both;
margin-bottom: 10px;
color: blue;
}
<form action="#" method="post" id="theForm">
<div><label for="task">Task</label><input type="text" name="task" id="task" required></div>
<input type="submit" value="Add It!" id="submit"><br>
<button type="button" id="renderbtn">render list</button>
<div id="renderList"></div>
<div id="output"></div>
edit: I can just convert it back to an array with something like the following if there is no other way of doing it.
var ar = stringToInsert.split(' : ');
or something based on:
stringToInsert.split(' : ').forEach ... or if that doesn't work I could try map()

I'm going to show you a different approach that may help clear things up -
function ul (nodes)
{ const e = document.createElement("ul")
for (const n of nodes)
e.appendChild(n)
return e
}
function li (text)
{ const e = document.createElement("li")
e.textContent = text
return e
}
function onSubmit (event)
{ event.preventDefault()
tasks.push(f.taskInput.value)
f.taskInput.value = ""
render()
}
function render ()
{ const newList = ul(tasks.map(li))
f.firstChild.replaceWith(newList)
}
const tasks = [ "wash dishes", "sweep floors" ] // <- initial tasks
const f = document.forms.main // <- html form
f.addButton.addEventListener("click", onSubmit) // <- button listener
render() // <- first render
<h3>todo list</h3>
<form id="main">
<ul></ul>
<input name="taskInput" placeholder="example: paint fence">
<button name="addButton">Add Task</button>
</form>
And here's a more modern approach using a DOM library like React -
const { useState, useRef } = React
const { render } = ReactDOM
function TodoList ({ initTasks = [] })
{ const [ tasks, updateTasks ] =
useState(initTasks)
const inputEl =
useRef(null)
function onSubmit () {
updateTasks([ ...tasks, inputEl.current.value ])
inputEl.current.value = ""
}
return <div>
<h3>todo list</h3>
<ul>{tasks.map(t => <li children={t} />)}</ul>
<input ref={inputEl} placeholder="ex: paint fence" />
<button onClick={onSubmit}>add</button>
</div>
}
render
( <TodoList initTasks={[ "wash dishes", "sweep floors" ]}/>
, document.body
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

Scroll is skipping header and starting from body

When site is loading, page starts from body and I have to scroll up to see styled header.
(But this problem does not appear on all browsers)
I want to start scrolling with the Header.
Here is the live site: http://pavlorishko228-001-site1.btempurl.com/
Code:
import React from "react";
import { Link } from 'react-router-dom';
import styled from "styled-components";
import ScrollHandler from "../../components/ScrollHandler";
import Logo from '../../public/SmokeyWayLogo.svg';
const StyledLogo = styled("img")<{isScrolled: boolean}>`
filter: ${props => props.isScrolled ? "invert(1)" : "drop-shadow(2px 4px 3px black)"};
height: 80px;
padding-left: 0;
float: left;
`;
const StyledLink = styled("div")<{isScrolled: boolean}>`
padding: 20px;
margin: 10px;
display: inline-block;
border-radius: 5px;
&:hover {
box-shadow: 0px 0px 15px 2px ${props => props.isScrolled ? "white" : "black"};
color: black;
}
a {
text-decoration: inherit;
color: ${props => props.isScrolled ? "white" : "black"};
}
`;
const StyledNav = styled("div")<{isScrolled: boolean}>`
position: fixed;
width: 100%;
background-color: ${props => props.isScrolled ? "transparent " : "white"};
`;
function Header(){
const _isScrolled = ScrollHandler();
return(
<header>
<StyledNav isScrolled={_isScrolled}>
<StyledLogo isScrolled={_isScrolled} src={Logo}></StyledLogo>
<StyledLink isScrolled={_isScrolled}>
<Link to="./">Smokey Way</Link>
</StyledLink>
<StyledLink isScrolled={_isScrolled}>
<Link to="./">Головна</Link>
</StyledLink>
<StyledLink isScrolled={_isScrolled}>
<Link to="./">Меню</Link>
</StyledLink>
</StyledNav>
</header>
)
}
export default Header;

I used chrome on my device and was fine, I mean i saw your header after loading the page.
Your problem is not normal and its kinda weird for me, But i suggest you JS (in this code before loading page it makes you to be sure that you are at the top of the current page) and give me the feedback:
$(window).on('beforeunload', function(){
$(window).scrollTop(0);
});

Hide popup after button press. React Js

I have a some popup block or modal window as you like. And I want that it will close after I press on button. Button will be visible after checkboox will be true. Help me pls. May be I have to add something to css, or JS code is incorrect.
Code is below.
class ModalWindow extends React.Component {
constructor() {
super();
this.state = {
open: false,
checked: false
};
this.handleChange = this.handleChange.bind(this);
}
handleChange() {
this.setState({
checked: !this.state.checked
})
}
hide() {
this.setState({
open: false,
});
}
show() {
this.setState({
open: true,
});
}
componentDidMount() {
this.show();
}
render() {
const buttonContent = this.state.checked ? <div className={s.showButton}>
<button onClick={() => this.hide()} className={s.closeBtn}>Confirm yes yes</button>
</div> : null;
return (
<div className={this.state.open ? 'show':'hide'}>
<div className={s.modal}>
<h2 className={s.modalText}>Some text in block</h2>
<label>I want to confirm</label>
<input type="checkbox" checked={this.state.checked} onChange={this.handleChange}/>
{buttonContent}
</div>
</div>
);
}
}
export default withStyles(s)(ModalWindow);
.modal {
background:#fff;
width: 350px;
height: 200px;
margin: 5% auto;
padding: 5px 20px;
position: relative;
border: 2px solid #0000ee;
}
.hide {
display:none
}
.modalText {
font-size: 18px;
color: #000000;
}
label {
margin:0 15px 0 0;
}
.closeBtn {
display: block;
position: absolute;
bottom: 5px;
width: 150px;
height:50px;
margin:0 0 0 100px;
outline: none;
color: #555;
border: none;
background: #000000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>

With react you have another way to do hiding and showing of elements. You just render it or you don't.
So instead of setting the state inside the modal dialog to show or hide the modal dialog you should have a property outside of it which decides if this dialog is rendered. Your React App should look something like this:
class ComponentWithModalDialog extends React.Component {
render() {
const {showModal} = this.props;
if(showModal) {
return <ModalWindow />
}
else {
return <div>
other content
</div>
}
}
}