I am trying to use this component: https://github.com/jrowny/react-absolute-grid.
The documentation says I should pass a displayObject which renders items.
So I created a displayObject, like the one in the docs which has this render method:
render: function() {
// Supposing your item shape is something like {name: 'foo'}
const { item, index, itemsLength } = this.props;
return <div>Item {index} of {itemsLength}: {item.name}</div>;
}
I passed it to the component like this:
<AbsoluteGrid
items={SampleData.screens}
displayObject={<DisplayObject/>}
onMove={onMoveDebounced}
dragEnabled={true}
responsive={true}
verticalMargin={42}
itemWidth={250}
itemHeight={250}
filteredProp={'name'}
/>
Where SampleData.screens is:
module.exports = {
screens: [
{'url': 'http://invisionapp.com/subsystems/do_ui_kit/assets/img/screens/original-1x/screen-1-1-login.jpg', 'name': 'login', 'sort': 1, 'key': 1},
{'url': 'http://invisionapp.com/subsystems/do_ui_kit/assets/img/screens/original-1x/screen-1-2-sign-up.jpg', 'name': 'signup', 'sort': 2, 'key': 2},
{'url': 'http://invisionapp.com/subsystems/do_ui_kit/assets/img/screens/original-1x/screen-1-3-walkthrough.jpg', 'name': 'walkthrough', 'sort': 3, 'key': 3}
]
};
When I open the page in the browser, I don't see the text from the displayObject.
How can I use the displayObject?
DisplayObject works good when is a function that return the render html, I try creating a different React.Component for it but got some issues
const items = [
{ key: "0", sort: 0, name: 'Test 1', filtered: false },
{ key: "1", sort: 1 ,name: 'Test 2', filtered: false },
{ key: "2",sort: 2, name: 'Test 3', filtered: false},
{ key: "3", sort: 3,name: 'Test 4', filtered: false }
]
function GridItem(props) {
const { item, index, itemsLength } = props;
return <div >
<span>{item.name}</span>
</div>;
}
const AbsoluteGrid = createAbsoluteGrid(GridItem);
Related
I have such data:
const dataList = [
{
id: 1,
title: 'obj1',
published: true,
},
{
id: 2,
title: 'obj2',
published: true,
},
{
id: 3,
title: 'obj3',
published: false,
},
{
id: 4,
title: 'obj4',
published: true,
},
{
id: 5,
title: 'obj5',
published: false,
},
];
I also have two checkboxes with this structure:
enter image description here
filterList = [
{
id: 1,
title: 'published',
label: 'published',
checked: false,
},
{
id: 2,
title: 'unpublished',
label: 'unpublished',
checked: false,
},
],
how do I filter this kind of data using these checkboxes? I have implemented switching their state, but I don't understand how to filter the data
I'm trying to implement this in a function
const applyFilter = () => {
let updData = dataList;
const filterChecked = filterList.filter((item: any) => item.checked);
if (filterChecked.length) {
// how to dynamically substitute data from checkboxes?
updData = updData.filter((item) => item.published === //true//);
}
};
Here's an attempt at a minimal example that hopefully gives a clear overview of how it's possible to filter elements. You can use your state to control how the elements are filtered out of the list, and then render those that remain:
const App = () => {
const [showingBs, setShowingBs] = React.useState(true);
return (<div>
<input
type = "checkbox"
checked = {showingBs}
onChange = {
() => setShowingBs(!showingBs)
}
/>
{
['a', 'b', 'a', 'b', 'b', 'a', 'b']
.filter(x => showingBs || x !== 'b')
.map(x => <p>{x}</p>)
}
</div>)
}
ReactDOM.render( < App / > , document.getElementById("mount"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="mount"></div>
I've been searching everywhere to find this but all the answers are about just adding new items to an array with useState.
So imagine I have an array like this
[
{
id: 1,
title: 'take out trash',
done: false
},
{
id: 2,
title: 'wife to dinner',
done: false
},
{
id: 3,
title: 'make react app',
done: false
},
]
});
Now I want to change it with a completely new array by using useState.
Like,
{
[
{
id: 5,
title: 'X',
done: true
},
{
id: 8,
title: 'Y',
done: true
},
{
id: 9,
title: 'Z',
done: true
},
]
})
first initialize the new array :
export default function App() {
const newArray = [
{
id: 5,
title: "X",
done: true
},
{
id: 8,
title: "Y",
done: true
},
{
id: 9,
title: "Z",
done: true
}
];
...
then:
1- import useState and useEffect from React
2- initiate your state
3- set your to the newArray inside the useEffect function
4- map your state array and return it to test
import { useEffect, useState } from "react";
export default function App() {
const newArray = [
{
id: 5,
title: "X",
done: true
},
{
id: 8,
title: "Y",
done: true
},
{
id: 9,
title: "Z",
done: true
}
];
const [data, setData] = useState([]);
useEffect(() => {
setData(newArray);
}, []);
return (
<div>
{data
? data.map((o, i) => <div key={i}> title: {o.title} </div>)
: "loading..."}
</div>
);
}
I'm working in an Angular 9 app and I need to filter an array based on another array inside each object. To understand me here is an example of the array
const products = [
{
name: 'Product 1',
origins: [
{ quantity: 1, name: 'Pack 1' },
{ quantity: 1, name: 'Pack 2' },
]
},
{
name: 'Product 2',
origins: [
{ quantity: 1, name: 'Pack 1' },
{ quantity: 1, name: 'Pack 2' },
]
},
{
name: 'Product 3',
origins: [
{ quantity: 1, name: 'Inventory' },
{ quantity: 1, name: 'Pack 5' },
]
}
]
So I got a filter input which has to filter the products by a coincidence on the name of the product or one or more origin's name.
For example, if I type "2" the result array must be:
products = [
{
name: 'Product 1',
origins: [
{ quantity: 1, name: 'Pack 2' },
]
},
{
name: 'Product 2',
origins: [
{ quantity: 1, name: 'Pack 2' },
]
}
]
Because the character "2" is in the name of origin of Product 1 and Product 2, also is present in the name "Product 2"
I tried many things to do this but the result array always modifies my original array when I put this in a pipe
<input type="text" [(ngModel)]="searchtext">
<div *ngFor="let p of (saleProducts | filter : searchtext); let i = index">
{{ p.name }}
<div *ngIf="p.origins.length > 0">
<div *ngFor="let o of p.origins">
{{ o.name }}
</div>
</div>
</div>
What is the best (simple and optimized) way to filter this using a pipe without modifying the original array?
below a pipe implementation to with a default key origins:
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(value: any[], searchName: string, key = 'origins'): any[] {
const products = []
value.forEach(product => {
const matches = product[key].filter(({ name }) => name === searchName)
if (matches.length) {
products.push({ ...product, [key]: matches })
}
})
return products
}
}
Given is following data structure
const list = [
{
title: 'Section One',
data: [
{
title: 'Ay',
},
{
title: 'Bx',
},
{
title: 'By',
},
{
title: 'Cx',
},
],
},
{
title: 'Section Two',
data: [
{
title: 'Ay',
},
{
title: 'Bx',
},
{
title: 'By',
},
{
title: 'Cx',
},
],
},
];
What i want to do ist to filter this list based on title property in the data array of each object.
An example would be to have the list where the title property of the childs starts with "B", so the list will look like that:
const filteredList = [
{
title: 'Section One',
data: [
{
title: 'Bx',
},
{
title: 'By',
}
],
},
{
title: 'Section Two',
data: [
{
title: 'Bx',
},
{
title: 'By',
}
],
},
];
What i tried so far was something like that:
const items = list.filter(item =>
item.data.find(x => x.title.startsWith('A')),
);
or
const filtered = list.filter(childList => {
childList.data.filter(item => {
if (item.title.startsWith('B')) {
return item;
}
return childList;
});
});
But i think i am missing a major point here, maybe some of you could give me a tip or hint what i am doing wrong
Best regards
Your issue is that you're doing .filter() on list. This will either keep or remove your objects in list. However, in your case, you want to keep all objects in list and instead map them to a new object. To do this you can use .map(). This way you can map your objects in your list array to new objects which contain filtered data arrays. Here's an example of how you might do it:
const list=[{title:"Section One",data:[{title:"Ay"},{title:"Bx"},{title:"By"},{title:"Cx"}]},{title:"Section Two",data:[{title:"Ay"},{title:"Bx"},{title:"By"},{title:"Cx"}]}];
const filterByTitle = (search, arr) =>
arr.map(
({data, ...rest}) => ({
...rest,
data: data.filter(({title}) => title.startsWith(search))
})
);
console.log(filterByTitle('B', list));
I want to make a tree Grid by react-redux-grid. However I got the error: Uncaught TypeError: Cannot read property 'map' of undefined.
I had followed the instruction by https://github.com/bencripps/react-redux-grid/blob/master/docs/USING_TREE.md
Not sure what is going wrong, the codes is as below:
import { Grid } from 'react-redux-grid';
export const Tree = ({ store }) => {
const dataSource = {
data: [
{
id: 11,
parentId: 1,
name: 'Category 11',
editable: false,
leaf: true,
categoryCode: '12jf-3h3h-11'
}
],
partial: true
}
const data = {
root: {
id: -1,
parentId: null,
children: [
{
id: 1,
parentId: -1,
name: 'Category 1',
categoryCode: 'as-ffw-34neh-',
editable: true,
children: [
{
id: 12,
parentId: 1,
leaf: false // there are children for this record that haven't been fetched yet
// ... rest of data
},
{
id: 13,
parentId: 1
// ... rest of data
}
]
}
]
}
}
const treeConfig = {
stateKey: 'tree-grid-1',
gridType: 'tree', // either `tree` or `grid`,
showTreeRootNode: false, // dont display root node of tree
columns: [
{
dataIndex: 'category',
name: 'Category',
expandable: true // this will be the column that shows the nested hierarchy
},
{
dataIndex: 'categoryCode',
name: 'Category Code',
expandable: true // can be set on multiple columns
},
{
dataIndex: 'editable',
name: 'Editable',
expandable: false // will be displayed as flat data
}
],
data: data
dataSource: dataSource
};
return (
<Grid { ...treeConfig } />
);
}
//another page
let React = require('react');
import thunk from 'redux-thunk';
import Tree from '../Tree.jsx';
const reducers = {
//some reducers here
}
const store = createStore(reducer,applyMiddleware(thunk));
let gridPage = React.createClass({
render: function() {
return(
<Provider store={store}>
<Tree store={store} />
</Provider>
)
}
});