Develop Reference

Traverse and Replace Items in TreeData

I am stuck at the task of traversing a tree and replacing the nodes if they match the key. This is necessary as I load children lazy via REST, insert them into the parent node and then replace the parent node (The node I clicked onto) with the parent with loaded children.
The treeData interface is:
export interface TreeData {
keyNum:number,
icon:string,
name:string,
length:number,
type: string,
links: string,
children?: TreeData[]
}
_nodes = Temp array that replaces the current nodes
nodes = All elements
event = Current parent
test = Temporary array for pushing items when doing it recursively
In a first attempt I created this function:
let _nodes = nodes.map(node => {
if (node.keyNum=== event.keyNum) {
node = event;
}
return node;
})
setNodes(_nodes)
Unfortunately this doesn't do this recursively. Only when I open up the root item. In a next attempt I created this function:
const test = [] as TreeData[]
traverseTree(event,nodes, test)
dispatch(setNodes(test))
const traverseTree = (event: TreeData, currentNodes: TreeData[], temp: TreeData[])=>{
currentNodes.forEach(node=>{
if (node.keyNum === event.keyNum) {
node = event;
temp.push(node)
}
else{
if(node.children && node.children.length>0){
return node.children.forEach(nodeInLoop=>{
return traverseTree(event,[nodeInLoop], temp)
})
}
}
})
}
I can finally traverse the tree but the problem is that when I click element1
-root
- element 1
- element 2
this gets transformed to:
- element 1
- subelement 1
- subelement 2
- ...
So when I click a child everything above is replaced. How can I preserve also the parent when clicking element 1. So that the expected output is
- root
- element 1
- subelement 1
- subelement 2
- ...
- element 2

I would not use a third parameter like in your recursive code. Instead make the function return the new tree.
It is indeed a problem that in your attempt the only thing that happens to temp is that nodes are pushed unto it. But you'll also need to repopulate children arrays in the hierarchy. You can better use map for that, and spread syntax to clone nodes with newly created children arrays.
Your recursive attempt could be corrected like this:
const traverseTree = (event: TreeData, nodes: TreeData[]): TreeData[] =>
nodes.map(node =>
node.keyNum === event.keyNum ? event
: !node.children?.length ? node
: { ...node, children: traverseTree(event, node.children) };
);
Call like:
dispatch(setNodes(traverseTree(event,nodes)))

React - sort array of child components with state

Currently I'm working on a react project, but I'm seeing some unexpected behavior when sorting an array of stateful child components.
If I have a parent component
export function Parent(){
const [children, setChildren] = useState([
{name:'Orange',value:2},
{name:'Apple',value:1},
{name:'Melon',value:3}
])
var count = 0
function handleSort() {
var newChildren=[...children]
newChildren.sort((a,b)=>{return a.value-b.value})
setChildren(newChildren)
}
return (
<div>
<button onClick={handleSort}>Sort</button>
{children.map((child) => {
count++
return(<ChildComp key={count} details={child}/>)
})}
</div>
)
}
And a child component
function ChildComp(props){
const[intCount,setIntCount] = useState(0)
function handleCount(){
setIntCount(intCount+1)
}
return (
<div>
<p>{props.details.name}</p>
<button onClick={handleCount}>{intCount}</button>
</div>
)
}
When the page first renders everything looks great, three divs render with a button showing the number of times it was clicked and the prop name as it was declared in the array. I've noticed that when I sort, it sorts the props being passed to the child components which then rerender, but the intCount state of the child component stays tied to the original location and is not sorted. is there any way to keep the state coupled with the array element through the sort while still maintaining state data at the child level, or is the only way to accomplish this to raise the state up to the parent component and pass a callback or dispatch to the child to update it?

The count is not is not sorted. It just got updated when you sorted.
Keys help React identify which items have changed, are added, or are
removed. Keys should be given to the elements inside the array to give
the elements a stable identity
Every time you sort, key stay the same, as you use count.
Try using value as key
export function Parent(){
// ....
return (
<div>
<button onClick={handleSort}>Sort</button>
{children.map(child => {
return <ChildComp key={child.value} details={child}/> // key is important
})}
</div>
)
}
More info: https://reactjs.org/docs/lists-and-keys.html#keys

VueJs - DOM not updating on array mutation

I have a model in which I'm initializing an array on ajax success after the model is mounted
var self = this;
$.getJSON("somejson.json",
function (data) {
var list = [];
list = data.list.map(function (item) {
return { id: item.id, text: item.text };
});
self.selectableItems = list;
});
I have a click method on each of these items which removes the item from selectableItems
select: function (item) {
this.selectableItems.pop(item);
},
selectableItems renders correctly initially, but when I mutate the array, the dom isn't updating. Although the actual array is being modified correctly.
I verified this by having a computed property that returns the count of selectableItems. This count is updated correctly when the item is removed, but the dom still shows the item.
I also noticed that when I hard code the value of selectableItems in the ajax, everything works as expected!
self.selectableItems = [{ id: 1, text: "adsad"}];
I'm aware of the caveats of array mutation in vue. But I feel I'm missing something basic here, as I have just started exploring Vue.
Can someone point out on what I'm missing?

Array.pop() removes the last item from the array, it does not take any argument. It only removes the last item any argument you pass it.
That the reason your computed property showing the array count works as last item is being removed but not the item you want.
Use Array.splice()instead.
pass the index to your click method like this:
<ul>
<li v-for="(item, index) in selectableItems" #click="select(index)>{{item}}</li>
</ul>
script
select: function (index) {
this.selectableItems.splice(index, 1);
},

Dynamically created custom form components in react

See this gist for the complete picture.
Basically I will have this form:
When you click the plus, another row should appear with a drop down for day and a time field.
I can create the code to add inputs to the form, however I'm having trouble with the individual components (selectTimeInput is a row) actually updating their values.
The onChange in the MultipleDayTimeInput is receiving the correct data, it is just the display that isn't updating. I extremely new to react so I don't know what is causing the display to not update....
I think it is because the SelectTimeInput render function isn't being called because the passed in props aren't being updated, but I'm not sure of the correct way to achieve that.
Thinking about it, does the setState need to be called in the onChange of the MultipleDayTimeInput and the input that changed needs to be removed from the this.state.inputs and readded in order to force the render to fire... this seems a little clunky to me...

When you update the display value of the inputs in state, you need to use this.setState to change the state data and cause a re-render with the new data. Using input.key = value is not the correct way.
Using State Correctly
There are three things you should know about
setState().
Do Not Modify State Directly
For example, this will not re-render a
component:
// Wrong
this.state.comment = 'Hello';
Instead, use setState():
// Correct
this.setState({comment: 'Hello'});
The only place where you
can assign this.state is the constructor.
read more from Facebook directly here
I would actually suggest a little bit of a restructure of your code though. It's not really encouraged to have components as part of your state values. I would suggest having your different inputs as data objects in your this.state.inputs, and loop through the data and build each of the displays that way in your render method. Like this:
suppose you have one input in your this.state.inputs (and suppose your inputs is an object for key access):
inputs = {
1: {
selectedTime: 0:00,
selectedValue: 2
}
}
in your render, do something like this:
render() {
let inputs = Object.keys(this.state.inputs).map((key) => {
let input = this.state.inputs[key]
return (<SelectTimeInput
key={key}
name={'option_' + key}
placeholder={this.props.placeholder}
options={this.props.options}
onChange={this.onChange.bind(this, key)}
timeValue={input.selectedTime}
selectValue={input.selectedValue}
/>)
)}
return (
<div>
<button className="button" onClick={this.onAddClick}><i className="fa fa-plus" /></button>
{ inputs }
</div>
);
}
Notice how we're binding the key on the onChange, so that we know which input to update. now, in your onChange function, you just set the correct input's value with setState:
onChange(event, key) {
this.setState({
inputs: Immutable.fromJS(this.state.inputs).setIn([`${key}`, 'selectedTime'], event.target.value).toJS()
// or
inputs: Object.assign(this.state.inputs, Object.assign(this.state.inputs[key], { timeValue: event.target.value }))
})
}
this isn't tested, but basically this Immutable statement is going to make a copy of this.state.inputs and set the selectedTime value inside of the object that matches the key, to the event.target.value. State is updated now, a re-render is triggered, and when you loop through the inputs again in the render, you'll use the new time value as the timeValue to your component.
again, with the Object.assign edit, it isn't tested, but learn more [here]. 2 Basically this statement is merging a new timeValue value in with the this.state.inputs[key] object, and then merging that new object in with the entire this.state.inputs object.
does this make sense?

I modified the onChange in the MultipleDayTimeInput:
onChange(event) {
const comparisonKey = event.target.name.substring(event.target.name.length - 1);
const input = this.getInputState(comparisonKey);
input.selected = event.target.value;
input.display = this.renderTimeInput(input);
let spliceIndex = -1;
for (let i = 0; i < this.state.inputs.length; i++) {
const matches = inputFilter(comparisonKey)(this.state.inputs[i]);
if (matches) {
spliceIndex = i;
break;
}
}
if (spliceIndex < 0) {
throw 'error updating inputs';
}
this.setState({
inputs: [...this.state.inputs].splice(spliceIndex, 1, input)
});
}
The key points are:
// re render the input
input.display = this.renderTimeInput(input);
// set the state by copying the inputs and interchanging the old input with the new input....
this.setState({
inputs: [...this.state.inputs].splice(spliceIndex, 1, input)
});
Having thought about it though, input is an object reference to the input in the this.state.inputs so actually [...this.states.inputs] would have been enough??

React.js, How to track previous values while rendering?

new to Reactjs, so I'm trying to understand what concepts I'm missing.
I have an array of values, say [1,1,1,2,2,2,3,3,3] that I would like to process it as: "1...2...3...", but I have no idea how to keep track of what the previous value that was rendered.
My first thought was to set a state value to keep track what was processed. If the new value is the same as the previous, I can replace the text. But I can't set the state since it's in the rendering function:
Warning: setState(...): Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.
So how can I keep track of the value being rendered, or is there a better way to do this?
Example of what I tried:
var stuff = [1,1,1,2,2,2,3,3,3];
var foo = React.createClass({
display: function(k) {
return <line myStuff={k}>
},
render: function() {
return (
{Object.keys(stuff).sort().map(this.display)}
)
}
});
var line = React.createClass({
getInitialState: function() {
return {
currentValue: 0
};
},
checkRepeat: function(value) {
if (this.state.currentValue == value) {
return '.'
} else {
this.setState({currentValue: value});
return value;
}
},
render: function() {
<p>{this.checkRepeat(this.props.myStuff)}</p>
}
});
Thank you!

What your code currently does:
inside <Foo> component, Object.keys(stuff).sort() turns your array [1,1,1,2,2,2,3,3,3] into a different array, containing the keys, so result = ["0", "1", "2", "3", "4", "5", "6", "7", "8"]
each of these results is then used to create a new <Line> component, passing the "0", "1" etc as a prop to the component.
The intention of the code inside the <Line> component is probably to check if the number passed is unique (same a number from <Line> component before). If so, render the number, otherwise, render "."
Main issue with this code is that you are trying inside a child (<Line>), to compare its prop with a prop of a sibling child.
The best place to put this logic of comparing numbers, is inside the parent (<Foo>).
The child (<Line>) really should have simple and isolated logic: just render whatever prop the parent sends.
To fix:
Change the render() function inside <Foo>to:
render: function() {
// copy the stuff array to a new array,
// where we replace all repeated values with a "." symbol
var stuffCopy = stuff.map((item,i) =>
{ return (i==0 || item != arr[i-1]) ? item.toString() : "." });
return (
{stuffCopy.map(this.display)}
)
}
Then you can simplify your <Line> component to:
var line = React.createClass({
// this component no longer needs state
// it can simply render the prop
render: function() {
<p>{this.props.myStuff}</p>
}
});
PS: "Previous" can have two very different meanings:
"the value of the exact same variable at a previous moment in time": looking at one component, where the state or prop had value A, and then a new prop or state value of B is sent to the one component.
"the value of the same variable, in another instance, rendered at the same time": if you render 9 components at the same time, previous value could mean, the value of the sibling component, rendered at the same moment, but appearing before this component in the list.
Your code suggests your question is about meaning nr. 2. (and my answer is focused on that meaning).