I am trying to filter the list of items in state.items by adding items from state.filterItems to my state.filter array
if I use this.state.items.filter(items => items.cat === 'veg' ) of course this works but I need to be able to filter dynamically using the list of items added to my state.filter array and I'm not sure how to do this,
I would also like to be able select multiple options and then hit a button to apply the filters rather than selecting them one by one
https://www.webpackbin.com/bins/-KoCT_DiT2CNLz8ddr4O
Hello.js
import React, { Component } from 'react';
import logo from './logo.svg'
import './App.css'
import update from 'immutability-helper'
import TodoList from './TodoList'
import styled from 'styled-components'
import FilterList from './FilterList'
const Wrapper = styled.div`
max-width:1280px;
background: papayawhip;
margin: 0 auto;
padding:20px;
`
const Grid = styled.div`
display:flex;
flex-wrap:wrap;
`
const Cell = styled.div`
flex: 0 0 25%;
padding: 20px;
`
export default class hello extends Component {
constructor(props) {
super(props)
this.state = {
items: [
{id: 1, cat: 'fruit', text: 'apples'},
{id: 2, cat: 'fruit', text: 'oranges'},
{id: 3, cat: 'fruit', text: 'peaches'},
{id: 4, cat: 'veg', text: 'carrots'},
{id: 5, cat: 'veg', text: 'aubergine'},
{id: 6, cat: 'veg', text: 'peaches'},
{id: 7, cat: 'bread', text: 'olive bread'},
{id: 8, cat: 'bread', text: 'bread roll'},
{id: 9, cat: 'bread', text: 'bagel'},
],
filterItems: [
{id: 1, text: 'bread'},
{id: 2, text: 'fruit'},
{id: 3, text: 'vegetables'},
],
filter: [
{text: 'bread'}
],
}
}
handleFilterChange = (filter) => {
this.setState({filter: filter})
}
render() {
return (
<Wrapper>
<div>
<FilterList
value={this.state.filter}
onChange={this.handleFilterChange}
filterItems={this.state.filterItems}
/>
</div>
<Grid>
{
this.state.items.filter(items => items.cat === 'veg', 'fruit' )
.map(item =>
<Cell>
{console.log(this.state.filter.text)}
<div>{item.cat}</div>
<div>{item.text}</div>
</Cell>
)
}
</Grid>
</Wrapper>
)
}
}
// <pre>{JSON.stringify(this.state, null, 4)} </pre>
FilterList.js
import React, { Component } from 'react';
import TodoItem from './TodoItem'
import update from 'immutability-helper'
import styled from 'styled-components'
const FilterListBg = styled.div`
background: lightblue;
width: 100%;
height: 60px;
`
const FilterListItem = styled.div`
float: left;
height: 40px;
width: 100px;
padding:10px;
border-right: 1px solid #ff00ff;
`
const FilterBg = styled.div`
width: 100%;
height:40px;
background: #fff;
margin-top:20px;
`
const FilterItem = styled.div`
float: left;
height: 40px;
width: 100px;
padding:10px;
border-right: 1px solid #ff00ff;
`
export default class FilterList extends Component {
constructor() {
super()
this.state = {
search: ''
}
}
handleAdd = (item) => {
const value = update(this.props.value, {
$push: [
{
text: item,
id: Math.random(),
}
]
})
this.props.onChange(value)
}
handleRemove = (index) => {
const value = update(this.props.value, {
$splice: [
[index, 1]
]
})
this.props.onChange(value)
}
handleFilterUpdate = event => {
this.setState({ search: event.target.value })
}
render() {
return (
<div>
<input
type="text"
value={this.state.search}
onChange={this.handleFilterUpdate}
placeholder="Hledat podle nazvu"
/>
{this.state.search}
<FilterListBg>
{
this.props.filterItems.filter(items => items.text.toLowerCase().indexOf(this.state.search.toLowerCase()) >= 0)
.map((item,cat,index) =>
<FilterListItem key={item.id} onClick={()=>this.handleAdd(item.text)}>
{item.text}
</FilterListItem>
)
}
</FilterListBg>
Aktivní filtry
<FilterBg>
{
this.props.value.map((item, index) =>
<FilterItem key={item.id} onClick={this.handleRemove}>
{item.text}
</FilterItem>
)
}
</FilterBg>
</div>
)
}
}
Assuming you want to show the items matching your filterList, shouldn't something simple like this work?
const filterTexts = this.state.filter.map(item => item.text);
const itemsToShow = this.state.items.filter(
item => filterTexts.indexOf(item.cat) !== -1);
And then you can map over itemsToShow to create your Cells.
If you want a one-liner to simply copy-paste:
this.state.items.filter(items => this.state.filterItems.map(item => item.text)
.indexOf(items.cat) !== -1 )
.map(item =>
<Cell>
{console.log(this.state.filter.text)}
<div>{item.cat}</div>
<div>{item.text}</div>
</Cell>
)
Related
I want to create a drag and drop application using the Vue JS framework. Here is an example of my complete code.
The problem is with the id properties inside the children arrays.
For example, when I drag an object named 'AAA' to another place, everything works fine for me, but when I drag it back, I get an error like - Duplicate keys detected: '0'. This may cause an update error.
I'm pretty sure the problem is inside the oneDrop function
onDrop(e, categoryId) {
const itemId = parseInt(e.dataTransfer.getData('itemId'))
this.categories.map(item => {
item.children = item.children.filter(child => {
if (child.id == itemId) {
child.categoryId = categoryId;
this.categories[categoryId].children.push(child);
}
return child
})
})
}
Of course, I understand that when dragging using the push method, the old object remains and is not deleted, so I get this error, but how to deal with this problem? (Full code at the beginning of the question)
You need to filter list from and add item to list to:
new Vue({
el: "#demo",
data() {
return {
categories: [
{id: 0, title: "This is parent block", children: [{ id: 0, title: "AAA", categoryId: 0 }, { id: 1, title: "BBB", categoryId: 0 },],},
{id: 1, title: "This is parent block", children: [{ id: 2, title: "CCC", categoryId: 1 }, { id: 3, title: "DDD", categoryId: 1 },],},
],
};
},
methods: {
onDrop(e, categoryId) {
const itemId = parseInt(e.dataTransfer.getData("itemId"));
const id = categoryId === 0 ? 1 : 0
const child = this.categories[id].children.find(c => c.id === itemId)
child.categoryId = categoryId;
this.removeFromList(id, itemId)
this.addToList(categoryId, child)
},
addToList(categoryId, child) {
this.categories[categoryId].children = [...this.categories[categoryId].children, child];
},
removeFromList(id, itemId) {
this.categories[id].children = this.categories[id].children.filter(c => c.id !== itemId);
},
onDragStart(e, item) {
e.dataTransfer.dropEffect = "move";
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("itemId", item.id.toString());
},
},
})
.droppable {
padding: 15px;
border-radius: 5px;
background: #2c3e50;
margin-bottom: 10px;
}
.droppable h4 {
color: white;
}
.draggable {
background: white;
padding: 5px;
border-radius: 5px;
margin-bottom: 5px;
}
.draggable h5 {
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div
v-for="category in categories"
:key="category.id"
#drop="onDrop($event, category.id)"
class="droppable"
#dragover.prevent
#dragenter.prevent
>
<h4>{{ category.title }}</h4>
<div class="child">
<div
v-for="item in category.children.filter(
(x) => x.categoryId === category.id
)"
:key="item.id"
#dragstart="onDragStart($event, item)"
class="draggable"
draggable="true"
>
<h5>{{ item.title }}</h5>
</div>
</div>
</div>
{{categories}}
</div>
hi everyone I have data given below by using this data I just want to create a cart click on this link to check what kind of cart I want to design from this data
const result = [
{
name: 'shanu',
label: ['ak', 'pk', 'plk', 'k'],
value: [1, 2, 3, 5],
},
];
// what i did
{result.map((el) => {
return (
<div>
<h1>{el.name}</h1>
<div className="vart">
<div>
{el.label.map((e) => {
return <p>{e}</p>;
})}
</div>
<div>
{el.value.map((e) => {
return <p>{e}</p>;
})}
</div>
</div>
</div>
);
})}
.vart {
display: flex;
flex-direction: row;
}
You can access the value according to the index of the label as below. You can use a CSS grid system to show a two-column view.
export default function App() {
const result = [
{
name: "shanu",
label: ["ak", "pk", "plk", "k"],
value: [1, 2, 3, 5]
}
];
return result.map((el) => {
return (
<div>
<div className="header">{el.name}</div>
<div className="grid-container">
{el.label.map((e, index) => {
return (
<div
className="grid-item"
style={{ textAlign: index % 2 === 0 ? "left" : "right" }}
>
{e} : {el.value[index]}
</div>
);
})}
</div>
</div>
);
});
}
Following styles will organise the grid with right aligning the second column.
.header {
color: #ffffff;
background-color: #4473c4;
padding: 10px 20px;
}
.grid-container {
display: grid;
grid-template-columns: auto auto;
}
.grid-item {
padding: 10px 20px;
color: #ffffff;
background-color: #91cf50;
}
HTML Output
Code Sandbox
If you want to link value and label this way:
ak => 1
pk => 2
plk => 3
k => 5
It would be better practice to change your data structure and move them aside. It avoids running in cases where label[x] is defined, but value[x] is not:
export default function App() {
const result = [
{
name: "shanu",
items: [
{ label: "ak", value: 1 },
{ label: "pk", value: 2 },
{ label: "plk", value: 3 },
{ label: "k", value: 5 },
],
}
];
return result.map((el) => {
return (
<div>
<h1>{el.name}</h1>
<div className="vart">
<div>
{el.items.map((e, index) => {
return (
<p>
{e.label} : {e.value}
</p>
);
})}
</div>
</div>
</div>
);
});
}
import { useState } from "react";
function App() {
const [itemsClicked, setItemsClicked] = useState([]);
const dataList = [
{ id: 1, name: "jake" },
{ id: 12, name: "edd" },
{ id: 13, name: "john" }
];
const highlight = (data) => {
setItemsClicked((array) => {
let itemClicked = array.includes(data)
? array.filter((x, i) => x.id !== data.id)
: [...array, data]; // What I'm trying to do here is to add a new field which is 'active' >> [...array, {...data, active: true}];
return itemClicked;
});
};
return (
<div>
{dataList.map((item, i) => (
<div
style={{
borderColor: itemsClicked[i]?.active ? "1px solid green" : ""
}}
>
<button onClick={() => highlight(dataList[i])}>HIGHLIGHT</button>
</div>
))}
</div>
);
}
export default App;
What I'm trying to do here is to create a toggle which is to highlight the div.
but my problem is on the state instead of it will remove the data object, it will continue appending. how to fix it?
for example when I try to click the first data which is jake, the output should be like this in itemsClicke
[{ id: 1, name: jake, active: true }]
but when I try to click again it will just remove it from the list, but on my side, it continuing to append the data which is wrong
[{ id: 1, name: jake, active: true },{ id: 1, name: jake, active: true },{ id: 1, name: jake, active: true },{ id: 1, name: jake, active: true }]
You can simply remove the itemsClicked state and put the dataList in a state variable to have control over it:
const [dataList, setDataList] = useState([
{ id: 1, name: "jake" },
{ id: 12, name: "edd" },
{ id: 13, name: "john" }
]);
Now, you need to check an isActive property to conditionally add some styles, so you need isActive but it's not in the current dataList and you created itemsClicked to solve this issue. But there are some simpler solutions like adding a property on the fly with your dataList.
You can implement toggleHighlight function to change isActive property:
const toggleHighlight = (id) => {
setDataList((prevState) =>
prevState.map((item) =>
item.id === id ? { ...item, isActive: !item.isActive } : item
)
);
};
this toggleHandler will accept an id and take a for loop over the dataList, it finds the clicked item. if it's an active item so it changes it to false and vice versa.
let's recap and put all things together:
import { useState } from "react";
function App() {
const [dataList, setDataList] = useState([
{ id: 1, name: "jake" },
{ id: 12, name: "edd" },
{ id: 13, name: "john" }
]);
const toggleHighlight = (id) => {
setDataList((prevState) =>
prevState.map((item) =>
item.id === id ? { ...item, isActive: !item.isActive } : item
)
);
};
return (
<div>
{dataList.map((item) => (
<div
key={item.id}
style={{
display: "flex",
paddingTop: 10,
border: item.isActive ? "2px solid green" : ""
}}
>
<p style={{ padding: 5 }}>{item.name}</p>
<button onClick={() => toggleHighlight(item.id)}>HIGHLIGHT</button>
</div>
))}
</div>
);
}
export default App;
Try this on a live playground
array.includes(data)
won't return true because of this: https://stackoverflow.com/a/50371323/17357155
Just use this. It's a simple example. I used itemsClicked only for storing the ids
const highlight = (data) => {
if(itemsClicked.indexOf(data.id) == -1)
{
setItemsClicked(prevData => {
return [...prevData, data.id]
})
}
}
{
dataList.map((item, i) => (
<div
style={{
border:
itemsClicked.indexOf(item.id) > -1 ? '1px solid green' : '',
}}
>
{itemsClicked.indexOf(item.id) > -1 ? '1px solid green' : ''}
<button onClick={() => highlight(dataList[i])}>HIGHLIGHT</button>
</div>
))
}
I have many div in cascade.
and I want to apply alternated colors to my golbal div ( green, yellow for example ). But i want that colors start from the begening of the global div not from the begening of the div that contains it..
I created this using recursivity.
This is what i have ( I displayed div borders to explain the design of the page i have. )
This is what i want
React code
<div>
{
intervenants.map(i => {
return (updateListDiv(i))
})
}
</div>
const updateListDiv = (intervenant) => {
if (intervenant.children && intervenant.children.length > 0) {
return (
intervenant.children.map((int, index) => {
let n = int.name + ' ( ' + int.profile.name + ' ) '
return (<div className="a b" key={Math.random()}>
<a> {int.name} </a>
( {int.profile.name} )
{updateListDiv(int)}
</div>)
})
)
} else {
}
}
css
.a {
margin-left: 30px;
}
.b {
line-height: 24pt;
border: solid 1px black;
}
Every item needs to know the previous color. So you can store the state globally, or (probably better) pass the state to your updateListDiv function.
Here I call the state isEven:
import React from 'react';
const intervenants = [
{ name: 'a', profile: { name: 'pa' }, children: [ { name: 'a.a', profile: { name: 'pa.a' }, children: null }, { name: 'a.b', profile: { name: 'pa.b' }, children: null }, ] },
{ name: 'b', profile: { name: 'pb' }, children: [ { name: 'b.a', profile: { name: 'pb.a' }, children: null }, { name: 'b.b', profile: { name: 'pb.b' }, children: null }, ] },
{ name: 'c', profile: { name: 'pc' }, children: [ { name: 'c.a', profile: { name: 'pc.a' }, children: null }, { name: 'c.b', profile: { name: 'pc.b' }, children: null }, ] },
];
const updateListDiv = (intervenant, isEven) => {
if (!intervenant.children || intervenant.children.length < 1) {
return;
}
return (
intervenant.children.map((int, index) => {
isEven = !isEven;
return (<div
key={ index }
style={{
marginLeft: '30px',
border: 'solid 1px',
backgroundColor: isEven ? '#ff0' : '#0f0',
}}
>
{ int.name }
{ updateListDiv(int, isEven) }
</div>);
})
);
}
export const ColorTree = ()=>{
return (<div>
{ updateListDiv({ children: intervenants }, false) }
</div>);
};
Alternatively, you can pass down an overall index, and check for modulo-2.
I like this approach more, because this is more flexible (it might come in handy to have a "total" index inside the childs, and it also becomes possible to e.g. use modulo-3 or something)
const updateListDiv = (intervenant, overAllIndex) => {
// ...
return (
intervenant.children.map((int, index) => {
overAllIndex++;
return (<div
style={{
backgroundColor: (overAllIndex % 2) ? '#ff0' : '#0f0',
}}
>
{ updateListDiv(int, overAllIndex) }
</div>);
})
);
}
I am using ant design table component and I have selected rows.
I want onClick reset selected rows.
I can not find out where it stores selected rows.
const rowSelection = {
onChange: (selectedRowKeys, rows) => {
this.setState({
selectedRowsArray: [...rows]
});
},
};
<Table rowSelection={rowSelection} columns={columns} dataSource={paymentsHistory} />
Any Idea how to clear selected rows?
rowSelection also takes selectedRowKeys property that will help you control the selected rows at any point in time.
const { selectedRowsArray } = this.state;
const rowSelection = {
selectedRowKeys: selectedRowsArray,
onChange: (selectedRowKeys, rows) => {
this.setState({
selectedRowsArray: [...rows]
});
},
};
<Table rowSelection={rowSelection} columns={columns} dataSource={paymentsHistory} />
Codesandbox Example | Antd Docs
We can also do this with hooks:
import { useState } from 'react';
import { Table, Button } from 'antd';
function App() {
const [selectedRowKeys, setRowKeys] = useState([]);
const [loading, setLoading] = useState([]);
const start = () => {
setRowKeys([]);
};
const onSelectChange = selectedRowKeys => {
setRowKeys(selectedRowKeys);
};
const rowSelection = {
selectedRowKeys,
onChange: onSelectChange,
};
const dataSource = [
{
key: '1',
name: 'Mike',
age: 32,
address: '10 Downing Street',
},
{
key: '2',
name: 'John',
age: 42,
address: '10 Downing Street',
}, enter code here
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
];
return (
<div className="App">
<Button type="primary" onClick={start} >
Reload
</Button>
<Table dataSource={dataSource} columns={columns} rowSelection={rowSelection} />;
</div>
);
}
export default App;
Maybe following example will make it clear for you:
import React, { useState } from "react";
import { Table, Button } from "antd";
import "antd/dist/antd.css";
import "./index.css";
export default function App() {
const columns = [
{
title: "Currency",
dataIndex: "сurrency",
key: "сurrency"
}
];
const data = [
{
key: "EUR",
сurrency: "€"
},
{
key: "USD",
сurrency: "$"
},
{
key: "RUB",
сurrency: "₽"
}
];
const [selectedRowsArray, setSelectedRowsArray] = useState([]);
const rowSelection = {
selectedRowKeys: selectedRowsArray,
onChange: (key) => {
setSelectedRowsArray(key);
exchangeMoney(key[0]);
}
};
function exchangeMoney(key) {
console.log(key);
}
return (
<>
<Table
columns={columns}
dataSource={data}
rowSelection={{ type: "radio", ...rowSelection }}
/>
<Button className="clear-btn" onClick={() => setSelectedRowsArray([])}>
CLEAR
</Button>
</>
);
}
see in codesandbox