Develop Reference

How Can I target single item by map button in React Typescript?

So I have a functional components here:
export default function Test() {
const [products, setProduct] = useState<any>([]);
const [image, setImage] = useState<any>([""]);
const [prices, setPrice] = useState<any>([]);
const [showPrice, setShowPrice] = useState<boolean>(false);
const [PhonePrice, setPhonePrice] = useState<any>("");
useEffect(() => {
async function loadProducts() {
const res = await fetch("http://raw.githubusercontent.com/reborn094/Practice/main/data.json", {
method: "GET",
});
const json = await res.json();
const data = json.products;
setProduct(data);
return (
<div>
{products.map((product: any, index: number) => {
return (
<Col>
<Card key={index} style={{ width: "20rem" }}>
<Card.Body>
<Card.Title>
</Card.Title>
<Card.Title>
<Child ProductImage={image[index]} name={product.name} code={product.code} onSelectProduct={()=>{
>
what should I write here????
------------------------
}}
></Child>
</Card.Title>
<Card.Text></Card.Text>
</Card.Body>
</Card>
</Col>
);
})}
</div>
);
}
And here is my Child components :
export default function Child(props:{
onSelectProduct?:()=> void;
}) {
return (
<div>
<Button onClick={props.onSelectProduct}></Button>
</div>
)
}
My question is What if I want to set button in Test components to target single item in list, what should I do? Because Now If I set Button that Button would trigger all item.What should I do in the function onSelectProduct?

React js useState throws error when state is passed as prop

I am writing an ecommerce webshop using React js and Commerce.js
I am very confused as I am not able to identify the precise problem. But here's how it's happening:
My App.js:
const App = () => {
const [products, setProducts] = useState([]);
const [cart, setCart] = useState([]);
const fetchProducts = async () => {
const { data } = await commerce.products.list();
setProducts(data);
};
const fetchCart = async () => {
setCart(await commerce.cart.retrieve());
};
const handleAddToCart = async (productId, quantity) => {
const item = await commerce.cart.add(productId, quantity);
setCart(item.cart);
};
useEffect(() => {
fetchProducts();
fetchCart();
}, []);
console.log(cart);
return (
<>
<Navbar totalItems={cart.total_items} />
{/* <Products products={products} onAddToCart={handleAddToCart} /> */}
{/* <Cart cartItems={cart} /> */}
</>
);
Now when I uncomment the <Cart cartItems={cart} />, React js Throws an error
This is the error in from the console
Uncaught Error: Objects are not valid as a React child (found: object with keys {raw, formatted, formatted_with_symbol, formatted_with_code}). If you meant to render a collection of children, use an array instead.
Interestingly enough, the single item is being passed on through the Cart.js but not without the error.
Here's Cart.js for Reference
const Cart = ({ cartItems }) => {
const classes = useStyles();
const EmptyCart = () => {
return (
<Typography variant="subtitle1">
You have no items in your cart. Start adding some :)
</Typography>
);
};
const FilledCart = () => {
return (
<>
<Grid container spacing={3}>
{cartItems.line_items.map((item) => (
<Grid item xs={12} sm={4} key={item.id}>
<CartItem items={item} />
</Grid>
))}
</Grid>
<div className={classes.cardDetails}>
<Typography variant="h4">
Subtotal: {cartItems.subtotal.formatted_with_symbol}
</Typography>
<div>
<Button
className={classes.emptyButton}
size="large"
type="button"
variant="contained"
color="secondary"
>
Empty Cart
</Button>
<Button
className={classes.checkoutButton}
size="large"
type="button"
variant="contained"
color="primary"
>
Checkout
</Button>
</div>
</div>
</>
);
};
if (!cartItems.line_items)
return <Typography variant="h4">Loading...</Typography>;
return (
<Container>
<div className={classes.toolbar} />
<Typography className={classes.title} variant="h3">
Your Shopping Cart
</Typography>
{!cartItems.line_items.length ? <EmptyCart /> : <FilledCart />}
</Container>
);
};
Update:
Here's what Cart object looks like

Remove item from list with redux/ hooks not working

I am making a watchlist component using redux/react/hooks. Component is in 3 pieces (form to add to list, container to map over securities, and security to display each item)
So far I have been able to add values by dispatching addStock in the form component. I tried to do the same thing in security component for deleteStock but it isn't working/ reloads page.
reducer:
const stockSelector = (state = STOCK_STATE, action) => {
switch (action.type) {
case STOCK_SELECTED:
return action.payload;
case FETCH_STOCK_LIST:
return { ...state, watchlist: action.payload.select, title: action.payload.name, loading: false};
case STOCK_LIST_LOADING:
return {...state, loading: true}
case ADD_STOCK:
return { ...state, watchlist: [action.payload, ...state.watchlist] };
case DELETE_STOCK:
return {
...state,
watchlist: [
...state.watchlist.slice(0, action.payload),
...state.watchlist.slice(action.payload + 1)
],
};
default:
return state;
}
action
export const deleteStock = (payload) => ({
type: DELETE_STOCK,
payload,
});
watchlist component
const Watchlist = ({selected, watchlists, number}) => {
const dispatch = useDispatch();
const [taskList, setTaskList] = useState(['AAPL', 'MSFT', 'AMZN'])
const [list, setList] = useState(selected)
const [allList, setAllList] = useState(watchlists)
const [selectNumber, setSelectNumber] = useState(number)
const selectWatchlist = async () => {
setList(selected)
setSelectNumber(number)
}
useEffect(() => {
selectWatchlist()
.then(dispatch(fetchStockList(selectNumber)))
}, []);
return (
<React.Fragment>
<Col className="watchlist-master-col">
<Row className="watchlist-form-row">
<Col>
<AddWatchlistForm className="watchlist-form" />
</Col>
</Row>
<Row className="watchlist-list-row">
<ListSecurityContainer
list={taskList}
className="watchlist-list"
number={number}
/>
</Row>
<Row>
<Modal className='modalOne' />
</Row>
</Col>
<Modal />
</React.Fragment>
)
}
const mapStateToProps = (state) => {
console.log(state)
return {
selected: state.Watchlist.stock.title,
watchlists: state.Watchlist.watchlist.watchlist,
watchlist: state.Watchlist.stock.watchlist,
number: state.Watchlist.watchlist.number,
}
}
container
const ListSecurityContainer = ({loading, stocks}) => {
const dispatch = useDispatch();
const handleCloseTask = (id) => {
dispatch(deleteStock(id))
}
if (loading === false) {
return (
<React.Fragment>
<Col>
{stocks.map((value, index) => (
<Security
key={stocks[index]}
id={index}
{...value}
name={value}
// onClose={handleCloseTask}
className="security-elem"
/>
))}
</Col>
</React.Fragment>
);
}
return <div>Loading...</div>
}
const mapStateToProps = (state) => {
console.log(state.Watchlist.stock.watchlist)
return {
stocks: state.Watchlist.stock.watchlist,
loading: state.Watchlist.stock.loading
}
}
security
const Security = (value) => {
const dispatch = useDispatch();
const [taskName, setTaskName] =useState(value.name)
const removeTask = () => {
dispatch(deleteStock(taskName))
}
return (
<div className="list-group-item">
{value.name}
<button onClick={removeTask()} style={{ float: 'right' }}>
<i className="glyphicon glyphicon-remove"></i>
</button>
</div>
);
}

Fixed this by correcting the issues listed in the comments and also fixing a type that I had in my constants.js file.
const Security = ({index, name}) => {
const dispatch = useDispatch();
const [taskName, setTaskName] =useState(name)
const removeTask = (e) => {
e.stopPropagation()
dispatch(removeStock(index))
}
return (
<Row className="list-group-item">
<div className="item-titles">
{name}
</div>
<button onClick={() => dispatch(removeStock(index))} className="remove-item">
<i className="glyphicon glyphicon-remove"></i>
</button>
</Row>
);
}

pass multiple refs to child components

Before diving to the main problem, my use case is I am trying to handle the scroll to a desired section. I will have navigations on the left and list of form sections relative to those navigation on the right. The Navigation and Form Section are the child component. Here is how I have structured my code
Parent.js
const scrollToRef = ref => window.scrollTo(0, ref.current.offsetTop);
const Profile = () => {
const socialRef = React.useRef(null);
const smsRef = React.useRef(null);
const handleScroll = ref => {
console.log("scrollRef", ref);
scrollToRef(ref);
};
return (
<>
<Wrapper>
<Grid>
<Row>
<Col xs={12} md={3} sm={12}>
<Navigation
socialRef={socialRef}
smsRef={smsRef}
handleScroll={handleScroll}
/>
</Col>
<Col xs={12} md={9} sm={12}>
<Form
socialRef={socialRef}
smsRef={smsRef}
/>
</Col>
</Row>
</Grid>
</Wrapper>
</>
);
};
Navigation.js(child component)
I tried using forwardRef but seems like it only accepts one argument as ref though I have multiple refs.
const Navigation = React.forwardRef(({ handleScroll }, ref) => {
// it only accepts on ref argument
const items = [
{ id: 1, name: "Social connections", pointer: "social-connections", to: ref }, // socialRef
{ id: 2, name: "SMS preference", pointer: "sms", to: ref }, // smsRef
];
return (
<>
<Box>
<UL>
{items.map(item => {
return (
<LI
key={item.id}
active={item.active}
onClick={() => handleScroll(item.to)}
>
{item.name}
</LI>
);
})}
</UL>
</Box>
</>
);
});
export default Navigation;
Form.js
I do not have idea on passing multiple refs when using forwardRef so for form section I have passed the refs as simple props passing.
const Form = ({ socialRef, smsRef }) => {
return (
<>
<Formik initialValues={initialValues()}>
{({ handleSubmit }) => {
return (
<form onSubmit={handleSubmit}>
<Social socialRef={socialRef} />
<SMS smsRef={smsRef} />
</form>
);
}}
</Formik>
</>
);
};
Social.js
const Social = ({ socialRef }) => {
return (
<>
<Row ref={socialRef}>
<Col xs={12} md={3}>
<Label>Social connections</Label>
</Col>
<Col xs={12} md={6}></Col>
</Row>
</>
);
};
Can anyone help me at passing multiple refs so when clicked on the particular navigation item, it should scroll me to its respective component(section).

I have added an example below. I have not tested this. This is just the idea.
import React, { createContext, useState, useContext, useRef, useEffect } from 'react'
export const RefContext = createContext({});
export const RefContextProvider = ({ children }) => {
const [refs, setRefs] = useState({});
return <RefContext.Provider value={{ refs, setRefs }}>
{children}
</RefContext.Provider>;
};
const Profile = ({ children }) => {
// ---------------- Here you can access refs set in the Navigation
const { refs } = useContext(RefContext);
console.log(refs.socialRef, refs.smsRef);
return <>
{children}
</>;
};
const Navigation = () => {
const socialRef = useRef(null);
const smsRef = useRef(null);
const { setRefs } = useContext(RefContext);
// --------------- Here you add the refs to context
useEffect(() => {
if (socialRef && smsRef) {
setRefs({ socialRef, smsRef });
}
}, [socialRef, smsRef, setRefs]);
return <>
<div ref={socialRef}></div>
<div ref={smsRef}></div>
</>
};
export const Example = () => {
return (
<RefContextProvider>
<Profile>
<Navigation />
</Profile>
</RefContextProvider>
);
};

Redux mapDispatchToProps access action within array.map

I am trying to get an action to be available within a function that is called within array.map. Passing the props from parent component to subcomponent is happening. It feels like it should be a simple task to make it available within the array.map function, but that has not proven successful.
Here's an updated example code:
In this example, being able to properly pass the 'actionUpdate' function to listItem is what I have not accomplished successfully.
function listItem(item,index) {
const id = item.id
const handleUpdated = e => {
e.preventDefault();
actionUpdate(id);
};
return (
<Button
onClick={handleUpdated}
color='primary'
variant='contained'
style={{ marginTop: '0.75rem' }}
>
Update
</Button>
);
}
function MyList(props) {
const { streams } = props;
return (
<List>
{streams.map(listItem)};
</List>
);
}
function listView(props) {
const { classes, streams } = props;
return (
<div style={{ width: '100%' }}>
<section className={classes.content}>
<Grid container>
<Grid item style={{ width: '100%' }}>
<MyList
streams={streams}
actionUpdate={actionUpdate}
/>
</Grid>
</Grid>
</section>
</div>
);
}
const mapStateToProps = state => {
const streams = R.path(['theObject', 'arrayOfObjects'])
)(state);
return { streams };
};
const mapDispatchToProps = dispatch => {
const actionUpdate = (itemId) => {
return dispatch(theUpdateAction(itemId));
};
return { actionUpdate };
};
const MainListView = connect(
mapStateToProps,
mapDispatchToProps
)(listView);
export default withStyles(styles)(MainListView);
I have my state and actions mapped to props using connect, mapStateToProps and mapDispatchToProps.
What I need to achieve is having access to the action from the dispatch within the listItem function.

You could define listItem within MyList, which would provide it access to MyList's props including updateAction.
function MyList(props) {
const { streams, actionUpdate } = props;
// Can access updateAction here
const listItem = (item,index) => {
const id = item.id
const handleUpdated = e => {
e.preventDefault();
actionUpdate(id);
};
return (
<Button
onClick={handleUpdated}
color='primary'
variant='contained'
style={{ marginTop: '0.75rem' }}
>
Update
</Button>
);
}
return (
<List>
{streams.map(listItem)};
</List>
);
}
function listView(props) {
const { classes, streams } = props;
return (
<div style={{ width: '100%' }}>
<section className={classes.content}>
<Grid container>
<Grid item style={{ width: '100%' }}>
<MyList
streams={streams}
actionUpdate={actionUpdate}
/>
</Grid>
</Grid>
</section>
</div>
);
}
const mapStateToProps = state => {
const streams = R.path(['theObject', 'arrayOfObjects'])
)(state);
return { streams };
};
const mapDispatchToProps = dispatch => {
const actionUpdate = (itemId) => {
return dispatch(theUpdateAction(itemId));
};
return { actionUpdate };
};
const MainListView = connect(
mapStateToProps,
mapDispatchToProps
)(listView);
export default withStyles(styles)(MainListView);