Develop Reference

How to edit css of <div> in cascade

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>);
})
);
}

Data not being passed to Vue component

I have a Vue component receiving an array of 'items' from its parent.
I've sorted them into categories, two 'items' in each category:
computed: {
// sort items into categories
glass: function() {
return this.items.filter(i => i.category === "glass").slice(0, 2);
},
ceramics:
// etc...
I need to place both items in categories.items to then pass them as props to another component:
data() {
return {
categories: [
{ name: "Glass", sort: "glass", items: {} },
{ name: "Ceramics", sort: "ceramics", items: {} },
{ name: "Brass", sort: "brass", items: {} },
{ name: "Books/Comics", sort: "books", items: {} },
{ name: "Collectibles", sort: "collectibles", items: {} },
{ name: "Pictures", sort: "pictures", items: {} },
{ name: "Other", sort: "other", items: {} }
]
};
},
When I use created or mounted nothing is passed through, when I use beforeDestroy or destroy and console.log the results it works fine, but, they're of no use when exiting the page.
The 'items' are from an Axios GET request, could this be why?
GET request from parent component:
methods: {
fetchItems() {
// items request
let uri = "http://localhost:8000/api/items";
this.axios.get(uri).then(response => {
// randomize response
for (let i = response.data.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[response.data[i], response.data[j]] = [
response.data[j],
response.data[i]
];
}
this.items = response.data;
});
}
},
Passing props to child component:
<div
class="items-container"
v-for="category in categories"
:key="category.name"
>
<router-link :to="'category.link'" class="category-names-home-link">
<h2 class="category-names-home">{{ category.name }}</h2>
</router-link>
<router-link
:to="'category.link'"
class="home-view-all"
#mouseover.native="expand"
#mouseout.native="revert"
>View All...</router-link
>
<div class="items">
<!-- Pass to child component as props: -->
<SubItem :item="categories.items" />
<SubItem :item="categories.items" />
</div>
</div>

Don't bother adding the items to the categories, keep them separate
Instead of multiple computeds, use one computed object hash to store all the filtered sets:
computed: {
filtered() {
if (!this.items) return null;
const filtered = {};
this.items.forEach(item => {
if (filtered[item.category]) {
filtered[item.category].push(item);
} else {
filtered[item.category] = [item];
}
});
return filtered;
}
}
Result:
{
'Glass': [ ... ],
'Ceramic': [ ... ]
...
}
In the template:
<div>
<div v-for="category in categories" :key="category.name">
<div class="items" v-for="item in filtered[category.name]">
<SubItem :item="item" />
</div>
</div>
</div>
You can use a v-if in the parent to prevent displaying anything until the data is loaded:
<display v-if="items" :items="items"></display>
Here is a demo

Cannot read property 'length' of undefined Error - ReactJS

I am basically a beginner in React. I have a dashboard page where I display a React Table. I have a customize button which will open a popup page, this popup page has some check boxes allows me to show/hide those React columns. Initially all the check boxes in this popup page is set to true. When I uncheck a column that particular column get disabled.
This is my parent component - the parent page is the page with the ReactTable, there are 10 columns now, not 8 as shown in the image.
import React, { Component } from 'react';
import { connect } from 'react-redux';
import ReactTable from 'react-table';
import LoadingComponent from '../shared/loading/LoadingComponent';
import InputComponent from '../shared/input/InputComponent';
import { makeData } from '../../util/Utils';
import CustomizedView from './customized_view/CustomizedView';
import filter from '../../assets/svg/filter.svg';
import config from '../../../framework/config';
//import EnquiryDetails from './enquiry_details/enquiryDetails';
const searchIcon = config.assetUrl + '/table_filter/svg/search-icon.svg';
class Dashboard extends Component {
constructor(props) {
super(props);
this.state = {
filterState: {},
data: makeData(),
searchText: '',
isFilterOpen: false,
isCustomizedOpen: false,
isFiltered: false,
isSearched: false,
searchedTableData: [],
filteredTableData: [],
filterItems: [
{ id: 1, value: 'Col 1', isChecked: true },
{ id: 2, value: 'Col 2', isChecked: true },
{ id: 3, value: 'Col 3', isChecked: true },
{ id: 4, value: 'Col 4', isChecked: true },
{ id: 5, value: 'Col 5', isChecked: true },
{ id: 6, value: 'Col 6', isChecked: true },
{ id: 7, value: 'Col 7', isChecked: true },
{ id: 8, value: 'Col 8', isChecked: true },
{ id: 9, value: 'Col 9', isChecked: true },
{ id: 10, value: 'Col 10', isChecked: true },
],
};
this.handleFilterClickinv = this.handleFilterClickinv.bind(this);
this.handleCustClickinv = this.handleCustClickinv.bind(this);
}
getTopBar() {
return (
<div className='top-bar-div'>
<div className='heading-div'>Dashboard</div>
</div>);
}
getFilterBar() {
const searchIconImg = (<img src={searchIcon} alt="" />);
if(this.state.isFiltered) table = this.state.filteredTableData;
if(this.state.isSearched) table = this.state.searchedTableData;
return (
<div className='table-header-div' >
<div className="filter-container-div">
</div>
<div className='search-enquiry-div'>
<div className="search-container">
<div className="search-input-container-div">
<InputComponent
height="41px"
width="280px"
inputClassName="order-filter-input"
placeholder='Search'
type="text"
value={this.state.searchText}
icon={searchIconImg}
onChange={this.onSearch}
/>
</div>
</div>
</div>
<div className="filter-icon-div-main">
<div className="custom-icon-div" onClick={() => { this.handleCustClickinv(); }}>
<div className='customize-view-inventory'>Customized View </div>
</div>
</div>
</div>);
}
getColumns() {
const columns = [
{
id: "col16",
Header: () => {
return (
<div>
<div className="col1-heading">Col 1</div>
<div className="col6-heading">Col 6</div>
</div>
);
},
accessor: d => {
return (
<div>
<div className="col1">{d.firstName}</div>
<div className="col6">{d.lastName}</div>
</div>
);
},
width: 200
},
{
id: "col27",
Header: () => {
return (
<div>
<div className="col2-heading">Col 2</div>
<div className="col7-heading">Col 7</div>
</div>
);
},
accessor: d => {
return (
<div>
<div className="col2">{d.firstName}</div>
<div className="col7">{d.lastName}</div>
</div>
);
},
width: 200
},
{
id: "col38",
Header: () => {
return (
<div>
<div className="col3-heading">Col 3</div>
<div className="col8-heading">Col 8</div>
</div>
);
},
accessor: d => {
return (
<div>
<div className="col3">{d.firstName}</div>
<div className="col8">{d.lastName}</div>
</div>
);
},
width: 200
},
{
id: "col49",
Header: () => {
return (
<div>
<div className="col4-heading">Col 4</div>
<div className="col9-heading">Col 9</div>
</div>
);
},
accessor: d => {
return (
<div>
<div className="col4">{d.firstName}</div>
<div className="col9">{d.lastName}</div>
</div>
);
},
width: 200
},
{
id: "col510",
Header: () => {
return (
<div>
<div className="col5-heading">Col 5</div>
<div className="col10-heading">Col 10</div>
</div>
);
},
accessor: d => {
return (
<div>
<div className="col5">{d.firstName}</div>
<div className="col10">{d.lastName}</div>
</div>
);
},
width: 200
},
{
id: "col11",
Header: "Col 11",
columns: [
{
id: "scol11a",
Header: "Sub Col 11a",
accessor: d => {
return d.firstName;
},
width: 80
},
{
id: "scol11b",
Header: "Sub Col 11b",
accessor: d => {
return d.firstName;
},
width: 80
},
{
id: "scol11c",
Header: "Sub Col 11c",
accessor: d => {
return d.firstName;
},
width: 80
},
{
id: "scol11d",
Header: "Sub Col 11d",
accessor: d => {
return d.firstName;
},
width: 80
}
]
},
{
id: "col12",
Header: "Col 12",
columns: [
{
id: "scol12a",
Header: "Sub Col 12",
accessor: d => {
return d.firstName;
},
width: 80
}
]
},
{
id: "col13",
Header: "Col 13",
columns: [
{
id: "scol13a",
Header: "Sub Col 13a",
accessor: d => {
return d.firstName;
},
width: 80
},
{
id: "scol13b",
Header: "Sub Col 13b",
accessor: d => {
return d.firstName;
},
width: 80
},
{
id: "scol13c",
Header: "Sub Col 13c",
accessor: d => {
return d.firstName;
},
width: 80
},
{
id: "scol13d",
Header: "Sub Col 13d",
accessor: d => {
return d.firstName;
},
width: 80
}
]
}
];
// if(this.state.isDisabled) {
// columns.splice(0, 1);
// columns.splice(columns.length - 1, 1);
// }
return columns;
}
/* function (item)*/
getCheckBox(item) {
return (
<div>
<input
value={item.id}
type='checkbox'
checked={item.isChecked}
onClick={(e) => { this.handleCheckChildElement(e); }}
/>
{item.value}
</div>);
}
handleCheckChildElement(event) {
const { items } = this.state.filterItems;
for (let i = 0; i < items.length; i = i + 1) {
if(items[i].id === +event.target.value) {
items[i].isChecked = !items[i].isChecked;
break;
}
}
this.setState({ filterItems: items });
console.log('handleCheckChildElement : > Items : ' + JSON.stringify(filterItems));
}
handleFilterClickinv() {
if(this.state.isCustomizedOpen) {
this.setState({ isCustomizedOpen: false });
}
const currentState = this.state.isFilterOpen;
this.setState({ isFilterOpen: !currentState });
}
handleCustClickinv() {
if(this.state.isFilterOpen) {
this.setState({ isFilterOpen: false });
}
const currentState = this.state.isCustomizedOpen;
this.setState({ isCustomizedOpen: !currentState });
}
resetFilter() {
const { items } = this.state.filterItems;
console.log("In resetFilter this.state.filterItems : " + JSON.stringify(this.state.filterItems));
console.log("In resetFilter : " + items);
for (let i = 0; i < items.length; i = i + 1) {
items[i].isChecked = true;
}
this.setState({ filterItems: items });
console.log('Reset filter : > Items : ' + JSON.stringify(filterItems));
}
render() {
const { data } = this.state;
return (
<div className='dashboard-body-container'>
<div className='hide'> {this.state.activeStepId}</div>
{this.getTopBar()}
{this.state.isCustomizedOpen &&
<CustomizedView
// items={filterItems}
getCheckBox={(item) => { this.getCheckBox(item); }}
// handleCheckChildElement={(event) => { this.handleCheckChildElement(event); }}
resetFilter={this.resetFilter()}
/>}
<div className='whiteBackground'>
{this.getFilterBar()}
<div>
{this.state.isLoading &&
<LoadingComponent />
}
</div>
<div>
<ReactTable
data={data}
columns={this.getColumns()}
showPagination
defaultPageSize={10}
/>
</div>
</div>
</div>
);
}
}
Dashboard.propTypes = {
};
function mapStateToProps(state) {
return {
auth: state.auth
};
}
export default connect(mapStateToProps)(Dashboard);
This is my child component - in my child page (the page in which checkboxes are displayed) I have 4 major functions - getCheckbox - to create checkbox, handlecheckchild - handle the check uncheck events, resetFilter and applyFilter. I have not still finished the code of applyFilter.
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { ActionCreators } from '../../../actions';
import ButtonComponent from '../../common/button/ButtonComponent';
class CustomizedView extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
const { items } = this.state;
return (
<div className='DashboardFilter-container-custom' >
<div className='bottomBar'>
<ButtonComponent
text='Apply'
className='activeButton filterMargin-div'
width='100'
display='inline-block'
// onClick={() => { this.props.applyFilter(); }}
/>
<ButtonComponent
text='Reset View'
className='greyedButton clear-div-filter'
width='100'
display='block'
marginTop='60'
onClick={() => { this.props.resetFilter(); }}
/>
</div>
<div>
<div className='column-points-text'>
<span> Columns </span>
</div>
<div className="App">
{items.map((item) => {
return this.props.getCheckBox(item);
})}
</div>
</div>
</div>
);
}
}
CustomizedView.propTypes = {
// items: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
getCheckBox: PropTypes.func.isRequired,
// handleCheckChildElement: PropTypes.func.isRequired,
resetFilter: PropTypes.func.isRequired
};
CustomizedView.defaultProps = {
};
function mapStateToProps(state) {
return {
auth: state.auth
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(ActionCreators, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(CustomizedView);
I have written all the major functions (for operations in child page in my parent and passing those functions as props - getCheckBox and resetFilter from parent page to child page.
I am getting error in the this line of my parent page - Cannot read property 'length' of undefined
for (let i = 0; i < items.length; i = i + 1) {
I am basically a beginner in React. So please help to me understand what is causing the error.
Also tell me whether it is okay to write all child functions in parent page?
Edit 1 - According to Code Maniac's answer
I changed my code in parent to
handleCheckChildElement(event) {
const { filterItems } = this.state;
for (let i = 0; i < filterItems.length; i = i + 1) {
if(filterItems[i].id === +event.target.value) {
filterItems[i].isChecked = !filterItems[i].isChecked;
break;
}
}
this.setState({ filterItems });
console.log('handleCheckChildElement : > Items : ' + JSON.stringify(filterItems));
}
resetFilter() {
const { filterItems } = this.state;
for (let i = 0; i < filterItems.length; i = i + 1) {
filterItems[i].isChecked = true;
}
this.setState({ filterItems });
console.log('Reset filter : > Items : ' + JSON.stringify(filterItems));
}
I am now getting error - The prop resetFilter is marked as required in CustomizedView, but its value is undefined.
I am getting error and warning in an infinite loop.
Edit 2 - if change my code like this
handleCheckChildElement(event) {
const { items } = this.state;
for (let i = 0; i < items.length; i = i + 1) {
if(items[i].id === +event.target.value) {
items[i].isChecked = !items[i].isChecked;
break;
}
}
this.setState({ filterItems: items });
console.log('handleCheckChildElement : > Items : ' + JSON.stringify(filterItems));
}
resetFilter() {
const { items } = this.state;
for (let i = 0; i < items.length; i = i + 1) {
items[i].isChecked = true;
}
this.setState({ filterItems: items });
console.log('Reset filter : > Items : ' + JSON.stringify(filterItems));
}
I am geeting yarn build error - Unused state field: 'filterItems' react/no-unused-state

Well problem in you code is here
const { items } = this.state.filterItems;
You're trying to find a key ( item property ) in array ( fillterItems is an array ) which is why you're getting undefined .
This will be same as below example.
let a = [{v:1},{2:2}];
let {items} = a;
console.log(items)
And what you should do instead to get proper output.
const { filterItems } = this.state;
Demo code
let a = {
items : [{v:1},{2:2}],
itemstemp : "temp"
}
let {items} = a;
console.log(items)

How to search filter in vue.js based on id

I am making a Vue project. It contains a div and it loops title and
data. Inside div there is a search filter and content which renders in p tags. The p tags also
loops.
Here is the code:
<div>
<div v-for="(item) in data" :key="item.id">
<div>{{item.title}}</div>
<input type="text" v-model="search" />
<div v-for="(content, j) in filteredLists" :key="j">
<p v-for="(con, k) in content" :key="k">{{con}}</p>
</div>
</div>
</div>
here is the data
search: "",
data: [
{
id: 1,
title: "Devsrc",
content: {
id: 1,
details: ["ONE_DEV_EMP1", "ONE_DEV_EMP2"]
}
},
{
id: 2,
title: "Devsrc2",
content: {
id: 2,
details: ["TWO_DEV_EMP1", "TWO_DEV_EMP2"]
}
},
{
id: 3,
title: "Devsrc3",
content: {
id: 3,
details: ["THREE_DEV_EMP1", "THREE_DEV_EMP2"]
}
}
]
computed property
filteredLists() {
return this.data.map(item => {
return item.content.details.filter(detail => {
return detail.toLowerCase().match(this.search);
})
});
},
What I am trying to do is render details only for item id == content
id.

Make filteredLists() a method instead of computed for starters.
<div>
<div v-for="(item) in data" :key="item.id">
<div>{{item.title}}</div>
<input type="text" v-model="search" />
<div v-for="(content, j) in filteredLists(item.id)" :key="j">
<p v-for="(con, k) in content" :key="k">{{con}}</p>
</div>
</div>
</div>
function filteredLists(id) {
let term = this.search.trim().toUpperCase();
let scoped = this.data.filter(item => { return parseInt(item.content.id) === parseInt(id) });
if(term.length > 0) {
return scoped.filter(item => {
return item.content.details.find(seek => seek.match(search));
});
}
return scoped;
}
let search = 'EMP2';
let data = [{
id: 1,
title: "Devsrc",
content: {
id: 1,
details: ["ONE_DEV_EMP1", "ONE_DEV_EMP2"]
}
},
{
id: 2,
title: "Devsrc2",
content: {
id: 2,
details: ["TWO_DEV_EMP1", "TWO_DEV_EMP2"]
}
},
{
id: 3,
title: "Devsrc3",
content: {
id: 3,
details: ["THREE_DEV_EMP1", "THREE_DEV_EMP2"]
}
}
];
function filteredLists(id) {
let term = search.trim().toUpperCase();
let scoped = data.filter(item => { return parseInt(item.content.id) === parseInt(id) });
if(term.length > 0) {
return scoped.filter(item => {
return item.content.details.find(seek => seek.match(search));
});
}
return scoped;
}
console.log(filteredLists(3));

filteredLists() {
return data.filter(
function(item) {
return item.content.details.find(
function(detail) {
return detail.toLowerCase().match(this.search)
}.bind(this)
)
}.bind(this)
)
}

items are not draggable

I am using library called react-beautiful-dnd for draggable lists. The use case of my application is there will be a nested list which should be draggable and the items inside its corresponding list should also be draggable. The items from List1 should not be dragged to List2. For this I am trying to create draggable vertical list which is not working. The items are not draggable at all. I have created a sandbox of this either.
here it is
https://codesandbox.io/s/vqzx332zj7
The source code is
import DraggableSubItems from "./DraggableSubItems";
const reorder = (list, startIndex, endIndex) => {
const result = Array.from(list);
const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
return result;
};
const items = [
{
id: 1,
name: "Top Level",
path: "top-level",
children: [
{
id: 1,
name: "dropbox",
path: "dropbox"
},
{
id: 2,
name: "asana",
path: "asana"
}
]
},
{
id: 2,
name: "Frontend Library",
path: "frontend-library",
children: [
{
id: 1,
name: "reactjs",
path: "reactjs"
},
{
id: 2,
name: "vuejs",
path: "vuejs"
}
]
}
];
const grid = 8;
const getListStyle = () => ({
padding: grid,
display: "flex",
flexDirection: "column"
});
class DraggableItems extends React.Component {
constructor(props) {
super(props);
this.state = {
items
};
}
onDragEnd = result => {
console.log("drag", result);
// dropped outside the list
if (!result.destination) {
return null;
}
if (result.destination.index === result.source.index) {
return;
}
const items = reorder(
this.state.items,
result.source.index,
result.destination.index
);
console.log("items", items);
this.setState({
items
});
};
render() {
return (
<DragDropContext onDragEnd={this.onDragEnd}>
<Droppable droppableId="droppable">
{(provided, snapshot) => {
console.log("provided", provided, snapshot);
return (
<div
ref={provided.innerRef}
style={getListStyle(snapshot.isDraggingOver)}
>
{this.state.items.map(item => (
<Draggable
key={item.id}
draggableId={item.id}
index={item.id}
>
{(draggableProvided, draggableSnapshot) => {
console.log(
"provided inside Draggable",
draggableProvided,
draggableSnapshot
);
return (
<React.Fragment>
<div
ref={draggableProvided.innerRef}
{...draggableProvided.draggableProps}
style={getListStyle(
draggableSnapshot.isDragging,
draggableProvided.draggableProps.style
)}
{...draggableProvided.dragHandleProps}
>
<h3>{item.name}</h3>
<DraggableSubItems
subitems={item.children ? item.children : []}
type={item.id}
/>
</div>
{draggableProvided.placeholder}
</React.Fragment>
);
}}
</Draggable>
))}
</div>
);
}}
</Droppable>
</DragDropContext>
);
}
}
export default DraggableItems;