Render products grouped by category - javascript

Good evening readers!
I'm working to a simple shopping cart single page application using react and redux!
That's the situation:
listOfCategories: ["Basic", "Hardware"]
listOfItems : [
{
fields: {
category: "Basic",
name: "Starter",
...
},
...
},
{
fields: {
category: "Basic",
name: "Entertainment",
...
},
...
},
{
fields: {
category: "Hardware",
name: "STB",
...
},
...
}
]
In my component, inside the render method, there is:
render() {
return (
<div>
<div>
Catalog
{this.props.listOfItems.map(item => (
<Product
id={item.fields.productexternalid}
name={item.fields.productname}
category={item.fields.SKYDE_Product_Category__c}
clicked={() => this.addToCart(item)}
costOneTime={item.fields.baseonetimefee}
costRecurring={item.fields.baserecurringcharge}
eligible={item.fields.eligible}
visible={item.fields.visible}
></Product>
))}
</div>
</div>
);
}
The result is something like this:
I just want to render an accordion filled with the category name, items grouped by category under the accordion:
Basic --> item.category
Starte --> item.name
Entertainment --> item.name
Hardware --> item.category
STB --> item.name
.map() and .filter() function will be useful, but i don't really know how to manage this case.
Any help will be appreciated!

map() and filter() are definitely useful in this case.
render() {
// in case "listOfCategories" is not predefined
let listOfCategories = listOfItems.map(item => item.fields.category)
// sort and remove duplicates
listOfCategories = listOfCategories.sort().filter((v, i) => listOfCategories.indexOf(v) === i);
return (
<div>
{listOfCategories.map(cat => (
// You probably had this `Category` component around
<Category key={cat} name={cat} {...catProps}>
{listOfItems.filter(item => item.fields.category === cat).map(item => (
<Product
key={item.fields.id}
id={item.fields.id}
name={item.fields.name}
{...itemProps}
/>
))}
</Category>
))}
</div>
);
}

Basic
<div>
Basic
{this.props.listOfItems.filter(item => item.fields.category ==="Basic").map(item => (
<Product
id={item.fields.productexternalid}
name={item.fields.productname}
category={item.fields.SKYDE_Product_Category__c}
clicked={() => this.addToCart(item)}
costOneTime={item.fields.baseonetimefee}
costRecurring={item.fields.baserecurringcharge}
eligible={item.fields.eligible}
visible={item.fields.visible}
></Product>
))}
</div>
Hardware
<div>
Basic
{this.props.listOfItems.filter(item => item.fields.category ==="Hardware").map(item => (
<Product
id={item.fields.productexternalid}
name={item.fields.productname}
category={item.fields.SKYDE_Product_Category__c}
clicked={() => this.addToCart(item)}
costOneTime={item.fields.baseonetimefee}
costRecurring={item.fields.baserecurringcharge}
eligible={item.fields.eligible}
visible={item.fields.visible}
></Product>
))}
</div>

Related

Unable to successfully loop through a redux store after a dispatch function

I'm trying to add product items to my redux store called cart. After adding an item I then compare both stores product(redux store) and cart(redux store) to check if the product has the same itemCode(item code. if they do I would like to Hide the add button and show the remove button. Unfortunately I'm getting different results, please look at the picture below for reference:
interface IProps {
items: ItemInterface[];
documentItems: ItemInterface[];
onAddItem: any;
}
const ItemFlatList2: FC<Partial<IProps>> = ({
items,
documentItems,
onAddItem,
}) => {
return (
<div className={styles.container}>
<ul>
{items!.map((item) => {
return (
<div className={styles.itemContainer}>
<div key={item.itemCode}>
<li>{item.itemCode}</li>
<li>{item.itemDescription}</li>
{documentItems!.length === 0 ? (
<AddButton
title={"ADD"}
onClick={() =>
onAddItem(
item.itemCode,
item.itemDescription,
item.itemSellingPrice
)
}
/>
) : (
documentItems!.map((documentItem) => {
if (documentItem.itemCode === item.itemCode) {
return <RedButton title={"Remove"} />;
}
if (documentItem.itemCode !== item.itemCode) {
return (
<AddButton
title={"ADD"}
onClick={() =>
onAddItem(
item.itemCode,
item.itemDescription,
item.itemSellingPrice
)
}
/>
);
}
})
)}
</div>
<div>
<li>Hello world</li>
</div>
</div>
);
})}
</ul>
</div>
);
};
export default ItemFlatList2;
The Cart Store:
const initialState: Partial<DocumentDetailsInterface>[] = [
];
const cartStore = createSlice({
name: "quotation reducer",
initialState,
reducers: {
add: {
reducer: (
state,
{ payload }: PayloadAction<DocumentDetailsInterface>
) => {
state.push(payload);
},
prepare: (item) => ({
payload: item,
}),
},
edit: (state, { payload }) => {},
remove: (
state,
{ payload }: Partial<PayloadAction<DocumentDetailsInterface>>
) => {
const findItem = state.findIndex((item) => payload!.code === item.code);
if (findItem !== 1) {
state.splice(findItem, 1);
}
},
},
extraReducers: {},
});
and The Product Store:
const initialState: ItemInterface[] = [
{
_id: "sdfsd",
itemType: "Physical Item",
itemUnitOfMeasure: "Unit",
itemCode: "PPC10",
itemDescription: "PPC Cement",
itemCostPrice: 50,
itemSellingPrice: 80,
itemQuantity: 100,
vatStatus: "Standard rate 15%",
},
{
_id: "qew",
itemType: "Physical Item",
itemUnitOfMeasure: "Unit",
itemCode: "2",
itemDescription: "Sepako Cement",
itemCostPrice: 30,
itemSellingPrice: 60,
itemQuantity: 100,
vatStatus: "Standard rate 15%",
},
{
_id: "sdfsd",
itemType: "Physical Item",
itemUnitOfMeasure: "Unit",
itemCode: "1",
itemDescription: "PPC Cement",
itemCostPrice: 50,
itemSellingPrice: 80,
itemQuantity: 100,
vatStatus: "Standard rate 15%",
},
];
const itemSlice = createSlice({
name: "item reducer",
initialState,
reducers: {},
extraReducers: {},
});
It looks like you have wrong logic in you render method. You displayed "Add" button when there are no items in documentItems and the if any items inside you keep adding "Add" buttons if they are not equal to itemCode. So basically you have 2 loops. First is render items, and second one is to render buttons for each item. But you can use one loop to render items and have logic to check if that item is already in the documentItems array - if not then display "Add" button, else "Remove" button.
return (
<div className={styles.container}>
<ul>
{items!.map(item => {
return (
<div className={styles.itemContainer} key={item.itemCode}>
<div key={item.itemCode}>
<li>{item.itemCode}</li>
<li>{item.itemDescription}</li>
{documentItems!.findIndex(
documentItem => documentItem.itemCode === item.itemCode,
) === -1 ? (
<AddButton
title={'ADD'}
onClick={() =>
onAddItem(
item.itemCode,
item.itemDescription,
item.itemSellingPrice,
)
}
/>
) : (
<RedButton title={"Remove"} />
)}
</div>
<div>
<li>Hello world</li>
</div>
</div>
);
})}
</ul>
</div>
);
I think you need to provide a unique key to button. Write the statemen when you are changing the state
<AddButton
title={"ADD"}
key={item.itemCode}
onClick={() =>
onAddItem(
item.itemCode,
item.itemDescription,
item.itemSellingPrice
)
}
/>
You used map function to check if item exists in the documentItems. I think changing it to some function will work out.
documentItems!.some((documentItem) => {
return documentItem.itemCode === item.itemCode
}
) ? (<RedButton title={"Remove"} />): (
<AddButton
title={"ADD"}
onClick={() =>
onAddItem(
item.itemCode,
item.itemDescription,
item.itemSellingPrice
)
}
/>
);

map over nested array in react

I want to display the values of the following data which is received when i make fetch request:
data: Array
0: Object
title: "html"
description: Array
name: "xyz"
class: "c"
1: Object
title: "html1"
description: Array
name: "xyz1"
class: "c1"
I have tried following code:
<div>
{
data.map((item, index) => {
<h1 key={index}>{item.title}/</h1>
{ item.description.map((c, i) =>
<div>
<h3 key={i}>{c.name} {c.class}</h3>
</div>
)}
})
}
</div>
The above code displays only the title value. It's not displaying name and class value. Please help me.
You were not returning anything to your data.map
{data.map((item, index) => {
return (
<div>
<h1 key={index}>{item.title}/</h1>
{item.description.map((c, i) => (
<div>
<h3 key={i}>
{c.name} {c.class1}
</h3>
</div>
))}
</div>
);
})}
If description is an object then you don't need to map over description again
this alone should do
<div>
{
data.map((item, index) => {
<h1 key={index}>{item.title}/</h1>
<div>
<h3>{item.description.name} {item.description.class}</h3>
</div>
})
}
</div>

Formik handle an array of objects

i'm trying to implement array of objects of a structure like this
selectedItems: [
{
_id: ""
}
]
what I want to do is when the user selects for example 2 or more _id, I want the structure to be like this
[
{
_id: "123"
},
{
_id: "456"
},
{
_id: "789"
},
]
but what I currently get with my implementation is an array of _id that will contain several items like this
[
{
_id: ["123", "456", "789"]
}
]
I followed the documentation of formik which suggests to implement this solution when we have an array of objects.
my implementation
const GetSelectedItems = () => {
return (
<Formik
initialValues={{
selectedItems: [{
_id: ""
}]
}}
onSubmit={values => {
console.log(values)
}}
render={({values, handleChange}) => (
<Form>
<FieldArray
name="selectedItems"
render={arrayHelpers => (
<div>
{values.selectedItems && values.selectedItems.length > 0 ? (
values.selectedItems.map((item, index) => (
<div key={index}>
<Field as="div"
name={`selectedItems${[0]}._id`}
>
<select name={`selectedItems.${[0]}._id`}
multiple={true}
className="form-control"
value={item._id}
onChange={event => {
handleChange(event);
}}
>
<option value={values.selectedItems._id}>
Choisir items
</option>
{itemList(items)} // data from api
</select>
</Field>
</div>
))
) : null}
<div>
<div>
<button type="submit">Submit</button>
</div>
</div>
</div>
)}
/>
</Form>
)}
/>)
}
You don't need to give a name prop to select's option components, just remove it and your code will run as expected:
// Removed name props from this component
<option key={option._id} value={`${option._id}`}>
{option._id}
</option>

How can I render the nested data in ReactJS?

I have the bellow alike data, and I would like to render them.
Let's say I would like to display firstName, address, and seatType and flightId for each flight the passenger has.This has to be done for each passenger. How can I achieve that?
Updated
[
{
"id": 1,
"firstName": "Smith",
"lastName": "John",
"address": [
"1 Street",
"YYY",
],
"flights": [
{
"flightId": 1,
"seatType": "oridinary"
},
{
}
]
},
{},
]
Here is my code
render() {
const { data } = this.state;
return (
<div>
{" "}
{Object.keys(data).map((key, index) => (
<p key={index}>
{" "}
{key} {data[key].flights}
{data[key].flights.map(k => (
{data[key].flights[k]}
))}
</p>
))}
</div>
);
}
I'm assuming you're looking for something like this:
return (
<div>
{
passengers.map(passenger => {
if (!passenger.id) { return null } /* + */
return (
<div key={passenger.id}>
<span>{passenger.firstName} {passenger.lastName}</span>
<div>
<span>Passenger's Flights</span>
{
passenger.flights && /* + */
Array.isArray(passenger.flights) && /* + */ passenger.flights.map(flight => {
if (flight.flightId) {
return (
<div key={flight.flightId}>
{flight.seatType}
</div>
)
}
return null
})
}
</div>
</div>
)
})
}
</div>
);
}
Note: remember that you should not use index as a key.
Edit: You need to add a null/undefined check
render() {
const { data } = this.state;
return (
<div>
{data.map((passenger, index) => (
<p key={index}>
{passenger.firstName} {passenger.address.join(' ')}
{passenger.flights.map(flight => (
<p>{flight.seatType} {flight.flightId}</p>
))}
</p>
))}
</div>
);
}
render() {
const { data } = this.state;
return (
<div>
{data.map(({id, firstName, address, flights}) => (
<p key={id}>
<div>{firstName}</div>
<div>{address.join(', ')}</div>
{flights.map(f => (<div key={f.flightId}>{f.flightId}-{f.seatType}</div>))}
</p>
))}
</div>
);
}
Not sure if it compiles but it's something like this. Also, if you have an ID, use it as key.

reuse react component in a map function

I have doubt I'm doing it right when returning a component in a map iteration. How can I improve the code or is there any better way to do it? (although my code is working)
https://codesandbox.io/s/5yzqy6vyqx
Parent
function App() {
return (
<div className="App">
{[
{
name: "banana",
count: 3
},
{
name: "apple",
count: 5
}
].map(({ name, count }) => {
return <List name={name} count={count} />;
})}
</div>
);
}
List component
const List = ({ name, count }) => {
return (
<li>
{name}: {count}
</li>
);
};
Simplify like this.
function App() {
return (
<div className="App">
<ul>
{[
{
name: "banana",
count: 3
},
{
name: "apple",
count: 5
}
].map(({ name, count }) => <li>{name}:{count} </li>)}
</ul>
</div>
);
}
You need to set unique value as key to List component because you are rendering List in loop. Unique value can be id per each object in array or index from .map but we are recommended to have unique id per object in data and use that as key when we iterate.
Index is not recommended as key but in worst case we can.
Also add ul element so that li will be rendered under ul
Below code has improved with adding key, ul and .map function without return
function App() {
return (
<div className="App">
<ul>
{[
{
id: 1
name: "banana",
count: 3
},
{
id:2,
name: "apple",
count: 5
}
].map(({ id, name, count }) => (
<List key={id} name={name} count={count} />;
))}
</ul>
</div>
);
}

Categories