We Keep Coding

JavaScript logic problem with dynamically deleting component

I am mapping values from an array to create a < select> dropdown. I want to be able to dynamically create and delete them. I have figured out creation (using mapping) but I have an issue with deletion. I'm using a key in the array to differentiate values but my problem is that when I go to delete a specific < select>, only the newest created gets deleted. This is because the key being passed into the delete method is the newest key create (line 2: let key = array.key;). What is a workaround solution that will let me pass the correct key into the delete method while keeping line 2. Hopefully this makes sense. Thanks
EDIT: The solution below works just make sure to update the components you are mapping in the state or the old array will be used to map
{this.state.AdditionQueryArray.map((array) => {
let key = array.key;
return (
<div>
<Select
onChange={(e) => this.HandleChange(e, key)}
options={this.state.OperatorOptions}
placeholder="Select Operator"
menuPortalTarget={document.body}
menuPosition={"fixed"}
/>
<button onClick={() => this.delete(key)}>Delete</button>
<div>
)
}
delete(key) {
const state = this.state;
for (var i = state.AdditionQueryArray.length - 1; i >= 0; --i) {
if (state.AdditionQueryArray[i].key == key) {
state.AdditionQueryArray.splice(i, 1);
}
}
this.setState(state);
}

Why wouldn't you pass the index instead of key?
If you're using index, you can exclude it with filter. As Example
{this.state.AdditionQueryArray.map((array, index) => {
return (
<div>
<Select
onChange={(e) => this.HandleChange(e, key)}
options={this.state.OperatorOptions}
placeholder="Select Operator"
menuPortalTarget={document.body}
menuPosition={"fixed"}
/>
<button onClick={() => this.delete(index)}>Delete</button>
<div>
)
}
delete(index) {
let tempArray = [...this.state.AdditionQueryArray]
let filteredArray = tempArray.filter((item, arrayIndex) => arrayIndex !== index)
this.setState({
AdditionQueryArray: filteredArray
})
I usually use this when I want to delete an element of list. I also add [...array] to make it didn't edit state directly

easiest way might be adding custom(data) attribute to that button tag and set it to key and read that attribute with event object in delete function
check: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

React change selected item index of array using order number

Hi I am new developer at Reactjs. I have a question. It's maybe simple but I want to learn best practice or best way about changing selected item index of array according to user order number. I mean user will give a number from Input and I will use that number for placement inside the array.
Example Object Array in My State :
const [state, setState] = useState({
dragFrames:
[{id:1,name:"test-1",zIndex:1},
{id:2,name:"test-2",zIndex:2},
{id:3,name:"test-3",zIndex:3}]
})
User zIndex Input "1" to item which id is 3
My expected new Array order is below:
dragFrames:
[id:3,name:"test-3",zIndex:1},
{id:1,name:"test-1",zIndex:2},
{id:2,name:"test-2",zIndex:3}
]
I can change and set zIndex number of any object but I cant change array order according to input value. How can I do this? Could you help me ?
I tried this before and I faced endless loop:
if (e.target.value>0) {
nowDev.z = e.target.value
var arrayCopy = state.dragFrames.slice()
state.dragFrames.map((item:any,index:any)=>{
if (index===e.target.value) {
arrayCopy.push(nowDev)
}else{
arrayCopy.push(item)
}
})
setState({ dragFrames: arrayCopy})
}

This is sorting example. You need to push elements first.
if (e.target.value > 0) {
const newArray = state.dragFrames.map((el, index) => index === e.target.value ? e.target.value : item);
setState({
dragFrames: newArray.sort((a, b) => a.zIndex.localeCompare(b.zIndex))
})
}

First you need to change zIndex of all elements in the array.
Algorithm for it will be following:
Map over the array and increment zIndex of all elements
for the element which is set by user, set it's zIndex to 1
Once above is done, sort by zIndex.
Code is mentioned below:
df = [{id:1,name:"test-1",zIndex:1},
{id:2,name:"test-2",zIndex:2},
{id:3,name:"test-3",zIndex:3}];
const updatedDF = df.map(x => {
if(x.id === 3) return {...x, zIndex: 1} // replace 3 with e.target.value
else return {...x, zIndex: x.zIndex + 1}
});
updatedDF.sort((x, y) => x.zIndex - y.zIndex)
console.log(updatedDF)

How to add a new numerical (string) key and shift the rest by +1 without breaking reactivity in Vuejs data

I have a Vue component that builds the below into a blog form field. The writer is allowed to creatively add/slot any field of choice in between each other when building a blog post ...(like: title, paragraph, blockquote, image) in an object like:
{"post":{"1":{"title":{"name":"","intro":""}},"2":{"paragraph":{"text":"","fontweight":"default-weight","bottommargin":"default-bottom-margin"}},"3":{"image":{"class":"default-image-class","creditto":""}},"4":{"subheading":{"text":"","size":"default"}}}};
I've tried using jQuery each to iterate and add it up into a makedo "dataObj" object and inject it back on the data:
data: { treeData: myUserData.post },
injectFieldType: function(type, position){
var storeObj = {};
var dataObj = this.treeData;
var crntKey;
$.each( dataObj, function( key, value ) {
if(key < position)
{
//remain same as key is not to change
}
else if(key == position)
{
dataObj[''+(parseInt(key)+1)] = dataObj[key]; /*push key further right with +1*/
dataObj[key] = /*add injected field here*/;
}
else if(key > position)
{
dataObj[''+(parseInt(key)+1)] = dataObj[key]; /*push the rest*/
}
});
and inject it back with (this.treeData = dataObj;) when it has injected the desired key and has shifted the rest by adding 1 to their keys when this is clicked:
<button type="button" v-on:click="injectFieldType('image','2')">
I need to have {"post":{"1":{"title":{"name":"","intro":""}},"2":{"image":{"class":"default-image-class","creditto":""}},"3":{"paragraph":{"text":"","fontweight":"default-weight".... When I try to inject the image field in-between the existing "name" and "paragraph" fields and make the paragraph key now 3 (instead of the old 2).
I want "{1:{foo}, 2:{bar}"} to become => {"1:{foo}, 2:{moo}, 3:{bar}" }(notice 3 changed key)
NOTE: the number order is needed to align them reliably in publishing. And data: { treeData: myUserData.post } needs to agree with the changes to allow creating the field and updating each form "name" attribute array.

There are a few problems to address here.
Firstly, trying to use var dataObj = this.treeData; and then this.treeData = dataObj isn't going to help. Both dataObj and this.treeData refer to the same object and that object has already been processed by Vue's reactivity system. You could address the reactivity problems by creating a totally new object but just creating an alias to the existing object won't help.
Instead of creating a new object I've chosen to use this.$set in my example. This isn't necessary for most of the properties, only the new one added at the end really needs it. However, it would have been unnecessarily complicated to single out that one property given the algorithm I've chosen to use.
Another potential problem is ensuring all numbers are compared as numbers and not as strings. In your example you're passing in the position as the string '2'. Operators such as < will give you the expected answer for numbers up to 9 but once the number of items in treeData reaches 10 you may start to run into problems. For string comparision '2' < '10' is false.
The next problem is the order you're moving the entries. In your current algorithm you're overwriting entry key + 1 with entry key. But that means you've lost the original value for entry key + 1. You'll end up just copying the same entry all the way to the end. There are two ways you could fix this. One would be to use a new object to hold the output (which would also help to address the reactivity problem). In my solution below I've instead chosen to iterate backwards through the keys.
new Vue({
el: '#app',
data () {
return {
newEntry: 'Yellow',
newIndex: 4,
treeData: {
1: 'Red',
2: 'Green',
3: 'Blue'
}
}
},
computed: {
treeDataLength () {
return Math.max(...Object.keys(this.treeData))
}
},
methods: {
onAddClick () {
const newIndex = Math.round(this.newIndex)
if (newIndex < 1 || newIndex > this.treeDataLength + 1) {
return
}
this.injectFieldType(this.newEntry, newIndex)
},
injectFieldType (type, position) {
const list = this.treeData
for (let index = this.treeDataLength + 1; index >= position; --index) {
if (index === position) {
this.$set(list, index, type)
} else {
this.$set(list, index, list[index - 1])
}
}
}
}
})
<script src="https://unpkg.com/vue#2.6.10/dist/vue.js"></script>
<div id="app">
<ul>
<li v-for="index in treeDataLength">
{{ index}}. {{ treeData[index] }}
</li>
</ul>
<input v-model="newEntry">
<input v-model="newIndex">
<button #click="onAddClick">Add</button>
</div>
The decision to use an object with number keys seems very strange. This would all be a lot easier if you just used an array.

How to remove value from array using index (Ant Design specific)?

I am creating a questionnaire type form using ReactJs and Ant Design. It is a follow up question of How to create a questionnaire type form using Ant Design?
Now I am succeeded in adding new questions and their respective answers but not in removing them. Let's suppose I have added three questions and when I am trying to remove any one of them, its always removing the last one. The related code for removing is as follows:
remove = k => {
console.log(k);
const { form } = this.props;
// can use data-binding to get
const keys = form.getFieldValue("keys");
// We need at least one passenger
if (keys.length === 1) {
return;
}
keys.splice(k, 1);
// can use data-binding to set
form.setFieldsValue({
keys: keys
});
console.log(keys);
};
The complete code can be found as a demo on codesandbox.io.

I have done something similar in the past. Got rid of the boilerplate of antd's remove and replaced with this. Every time I add a row I push that row (object) to formRows array then removing like this:
remove = key => {
const newRows = this.state.formRows.filter(r => r.key !== key)
this.setState(
prev => ({
formRows: newRows
})
)
}

Is it possible to map only a portion of an array? (Array.map())

I am building a project using React.js as a front-end framework. On one particular page I am displaying a full data set to the user. I have an Array which contains this full data set. It is an array of JSON objects. In terms of presenting this data to the user, I currently have it displaying the whole data set by returning each item of data using Array.map().
This is a step in the right direction, but now I need to display only a portion of the data-set, not the whole thing, I also want some control in terms of knowing how much of the total data set has been displayed, and how much of the data set is yet to be displayed. Basically I am building something like a "view more" button that loads more items of data to the user.
Here is what I am using now where 'feed' represents my Array of JSON objects. (this displays the whole data set.)
return (
<div className={feedClass}>
{
feed.map((item, index) => {
return <FeedItem key={index} data={item}/>
})
}
</div>
);
I am wondering if it is possible to use .map() on only a portion of the array without having to break up the array before hand? I know that a possible solution would be to hold the full data set, and break it off into portions, and then .map() those portions, but is there a way to .map() a portion of the array without having to break it up?
Any and all feedback is appreciated. Thanks!

Do not try to solve this problem with a hack in your mapping step.
Instead, slice() the list to the right length first before the mapping:
class Feed extends React.Component {
constructor(props) {
super(props)
this.handleShowMore = this.handleShowMore.bind(this)
this.state = {
items: ['Item A', 'Item B', 'Item C', 'Item D'],
showItems: 2
}
}
handleShowMore() {
this.setState({
showItems:
this.state.showItems >= this.state.items.length ?
this.state.showItems : this.state.showItems + 1
})
}
render() {
const items = this.state.items.slice(0, this.state.showItems).map(
(item) => <div>{item}</div>
)
return (
<div>
{items}
<button onClick={this.handleShowMore}>
Show more!
</button>
</div>
)
}
}
ReactDOM.render(
<Feed />,
document.getElementById('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>

The easiest way in my head is just to use a filter and map
const feed = [1,2,3,4,5,6,7,8,9,10,11]
feed.filter((item, index) => index < 5).map((filteredItem) => //do somthing with filtred item here//)
where 5 is just a number of items you want to get

you could use the slice function before to map the array, it looks like you want to do some pagination there.
var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);
// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']

Array.reduce should do what you're asking for. Just change the if statement depending on which range you want.
var excludeAfterIndex = 5;
feed.reduce((mappedArray, item, index) => {
if (index > excludeAfterIndex) { // Whatever range condition you want
mappedArray.push(<FeedItem key={index} data={item}/>);
}
return mappedArray;
}, []);

If you just want to map a portion of an array, you should first filter() your array to obtain the expected portion according to conditions :
array.filter(item => <condition>).map();

Yes, you can map portion of array, based on index. For example:
yourArray = yourArray.map(function (element, index, array) {
if (array.indexOf(element) < yourIndex) {
return {
//logic here
};
} else {
return {
//logic here
};
}
});

You can use slice to get portion of an array:
const data = [1,2,3,4,5,6,7,8,9,10,11]
var updatedData = data.slice(0, 3);

Array#map iterates over all items.
The map() method creates a new array with the results of calling a provided function on every element in this array.
You could use Array#filter
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
for the wanted items and then apply map for the wanted format.

There is no version of the map() function that only maps a partial of the array.
You could use .map() in conjunction with .filter().
You get the index of the current element as the second arg of map and if you have a variable for current page and page size you can quite easily filter the right page from your array without having to really slice it up.
var currentPage = 1;
var pageSize = 25;
dataArray.filter(function(elt, index) {
var upperThreshold = currentPage * pageSize;
var lowerThreshold = currentPage * pageSize - pageSize;
return index < upperThreshold && index > lowerThreshold;
});

Using slice() is better than adding a condition to your map or reduce function, but it still creates an additional, unused copy of that segment of the array. Depending on what you're doing, that might not be desired. Instead, just use a custom map function:
function sliceMap(fn, from, toExclusive, array) {
const len = toExclusive - from;
const mapped = Array(len);
for (let i = 0; i < len; i++) {
mapped[i] = fn(array[i + from], i);
}
return mapped;
};
Note that fn receives the array value and the (now) zero-based index. You might want to pass the original index (i + from). You might also want to pass the full array as a third parameter, which is what Array.map does.

Use this, easy approach
const [limit, setLimit] = useState(false);
const data = [{name: "john}, {name: 'Anna'}]
Here we will have 2 cases:
Display only first data which is John
Display all
data.slice(0, extended ? data.length : 1).map((item, index) => <Text>{item.name}</Text>)
....