I am defining my variable as array and pushing values inside it.
When I try to access this variable inside another method and apply push function on it, It says, Push is not defined.
When I check the typeof of this variable it shows as String.
Any suggestions?
recipients = [];
....
handleEmailChange(event) {
const {name , value , dataset: {recipientIndex} } = event.target;
this.toAddresses[recipientIndex][name] = value;
}
handleChange(event) {
this.recipients = event.detail.value;
}
handleSend(event){
this.toAddresses.forEach ( (address) => {
const email = address.emailAddress;
this.recipients.push(email);
I suppose it caused because in the function handleChange you wrote this.recipients = event.detail.value where event.detail.value is probably a string type.
Related
Is there way to change the index dynamically? or rebuild this object to where the 1 will be the Id of what ever object get passed into the function? Hope this makes sense.
export const createTree = (parentObj) => {
//keep in memory reference for later
const flatlist = { 1: parentObj }; <---- change the 1 based on parent.Id
...
}
My attempt thinking it would be easy as:
const flatlist = { parentObj.Id: parentObj };
Use computed property names to create a key from an expression:
const createTree = (parentObj) => {
const flatlist = { [parentObj.id]: parentObj };
return flatlist;
}
console.log(createTree({ id: 1 }));
New to react world, trying to learn destructuring, have been reading about it but stuck here,
if i do it like this function MList({action}) { // const data = [action];} i am just getting 'cameras'. So how to destructure and get same result as with props below
this is Mcard.js:
<Box pt={1}>
<MList
action="cameras"
/>
</Box>
This is inside MList komponent:
i want to destructure this code ( works gives 'name' and 'ident'):
function MList(props) {
const initialize = () => {
const data = props[props.action];
if (!data || data.length < 1) {
return;
}
data.map((e) => {
collapseStates["" + e.name + e.ident] = false;
return;
});
setCollapseS(collapseS);
};
}
I don't know React but destructuring the arguments should be something like the following
function MList({action, ...tail}) {
const initialize = () => {
const data = tail[action];
if (!data || data.length < 1) {
return;
}
data.map(({name, ident}) => {
collapseStates["" + name + ident] = false;
return;
});
setCollapseS(collapseS);
};
}
Also I would suggest using data.forEach instead of data.map if you don't need to save the result in another array
Nikita is correct about using props["action"] or props.action to grab the values. But you can actually destructure the props right inside of the function declaration like so:
function MList({ action, ...other props }) {
// Can now use action directly instead of props.action
}
It is also worth noting that array and object destructuring is not react specific, this is just how javascript works.
Edit: Accessing the action variable from here will give you "cameras" as a result because that is what you passed into the props
I've tried to decode the code I've been studying for a while. But, probably, because of my beginner mindset, so I still cannot understand how it works.
Here's my question. The word 'text' inside function addTodo('text').
Where does it come from? or it's declared as its own entity for itself. And what is it for?
Thank you in advance
function addTodo(text) { // The 1st 'text'
const todo = {
text, // the 2nd 'text'
checked: false,
id: Date.now(),
};
todoItems.push(todo);
renderTodo(todo);
}
const form = document.querySelector('.js-form');
form.addEventListener('submit', event => {
event.preventDefault();
const input = document.querySelector('.js-todo-input');
const text = input.value.trim(); // the 3rd text
if (text !== '') {
addTodo(text);
input.value = '';
input.focus();
}
});
function addTodo(text) is the signature for the 'addTodo' function. It takes one argument, which is called text.
This argument is then used within the function. It's provided as the value of a property to an object called todo (this is a bit of a short-hand in JavaScript)
The 'third' use of text, is created as result of applying trim to the value property of the input. This text could have been called something else.
This use of text is then passed to the function we previously talked about, assuming it's not empty.
You could equally write the code as follows - it would work just the same
function addTodo(textForTheTodo) { // The 1st 'text'
const todo = {
text: textForTheTodo, // the 2nd 'text'
checked: false,
id: Date.now(),
};
todoItems.push(todo);
renderTodo(todo);
}
const form = document.querySelector('.js-form');
form.addEventListener('submit', event => {
event.preventDefault();
const input = document.querySelector('.js-todo-input');
const textFromTheInput = input.value.trim(); // the 3rd text
if (textFromTheInput !== '') {
addTodo(textFromTheInput);
input.value = '';
input.focus();
}
});
I am trying to store all the values from result.createtimestamp into the time_stamp array, however it is only returning one result. not to sure why this is?
code:
let time_stamp = []
if(!createdIssueslength ){
return null
} else {
const lineChartData = createdIssueslength.map(result => {
time_stamp = result.create_timestamp
console.log('from console', result.create_timestamp)
})
}
console.log( 'time_stamp array',time_stamp);
You are overriding your time_stamp for every iteration you are not adding the elements.
Do this instead:
let time_stamp = []
if(!createdIssueslength ){
return null
} else {
time_stamp = createdIssueslength.map(result => result.create_timestamp)
}
console.log( 'time_stamp array',time_stamp);
On createdIssueslength.map function, you have assigned result.create_timestamp value to time_stamp variable.
So time_stamp value will be updated to the create_timestamp of each item.
To store all create_timestamp, it is needed to add that value to the array as follows.
const lineChartData = createdIssueslength.map(result => {
time_stamp.push(result.create_timestamp); // This part should be updated.
console.log('from console', result.create_timestamp)
})
The following image represents an object with two ui controls that are stored as this.state.controls
Initially the statesValue values are set via data that is received prior to componentDidMount and all is good. However updates to the each of the controls statesValues are sent via an event , which is handled with the following function
const handleValueStateChange = event => {
let controls = Object.entries(this.state.controls);
for (let cont of controls) {
let states = cont[1].states;
if (states) {
let state = Object.entries(states);
for (let [stateId, contUuid] of state) {
if (contUuid === event.uuid) {
cont[1].statesValue[stateId] = event.value;
}
}
}
}
};
which updates the values happily, however bearing in mind the updated values that change are a subset of this.state.controls, I have no idea how to use this.setState to update that that has been changed.
thanks in advance for any pointers
Instead of using Object.entries try destructuring to keep the reference to the objects.
And have a look at lodash. There are some nice helper functions to iterate over objects like mapValues and mapKeys. So you can keep the object structure and just replace the certain part. Afterwards update the whole state-object with the new one.
const handleValueStateChange = event => {
let {controls} = this.state;
controls = _.mapValues(controls, (cont) => {
const states = cont[1].states;
if (states) {
_.mapValues(states, (contUuid,stateId) => {
if (contUuid === event.uuid) {
cont[1].statesValue[stateId] = event.value;
}
});
}
return cont;
});
this.setState({controls});
};
Code is not tested but it should work like this.
Problem is you're updating an object which you've changed from it's original structure (by using Object.entries). You can still iterate in the same way however you'll need to update an object that maintains the original structure. Try this:
Make a copy of the controls object. Update that object. Replace it in state.
const handleValueStateChange = event => {
// copy controls object
const { controls } = this.state;
let _controls = Object.entries(controls);
for (let cont of _controls) {
let states = cont[1].states;
if (states) {
let state = Object.entries(states);
for (let [stateId, contUuid] of state) {
if (contUuid === event.uuid) {
// update controls object
controls[cont[0]].statesValue[stateId] = event.value;
}
}
}
}
}
// replace object in state
this.setState({controls});
};