I was trying to itertate an array and access description
Array
i'm itertaing via regular for loop like this
for (var index = 0; index <components.length; index++) {
const msgs = components[index].messages;
for(var value = 0; value < msgs.length; value ++ ){
console.log(msgs[value].description);
}
}
Please let me know how we can simplify it by using loadash methods in react native.
here it is using lodash
import {forEach} from 'lodash';
forEach(components,(component,index)=>{
const msgs = component.messages;
forEach(msgs,(msg,value)=>{
console.log(msg.description);
});
});
Related
I want to make once the code is redeemed it not be able to be used
const codes = ['5345345345345345','23123123123','312312312321q3']
for (var i = 0; i < codes.length; i++) {
if (message.content.includes(`redeem ${codes[i]}`)) {
message.channel.send("YES IT WORKED")
break;
}
}
You can essentially use Array.prototype.splice() to remove elements from the array therefore modifying it, so i would do something like this
const codes = ['5345345345345345','23123123123','312312312321q3']
for (var i = 0; i < codes.length; i++) {
if (message.content.includes(`redeem ${codes[i]}`)) {
// finding index of the code
const index = codes.indexOf(codes[i]);
//splicing from array
codes.splice(index, 1) // splice(index of element, number of elements to delete)
message.channel.send("YES IT WORKED")
break;
}
}
I've written for loop to fetch objects from array one by one, but the result fetched all of objects from loop and repeated those in one string.
Here is my code:
state = {
b: ["A","B","C","D","E","F","G","H","I"]
}
b = () => {
let d = [];
for (var i =0; i<=this.state.b.length - 1; i++) {
d.push(this.state.b[i])
}
return d;
};
I'm beginner in react native, how can I change this code to show object arrays like a list
You can use ListView directly like this :
<ListView
dataSource={this.state.b}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
can anyone help me with the proper way to iterate over an array of strings, that will then be placed in a paragraph tag using Reactjs?
The array looks something like:
names = [ "James", "Susan", "Frank" ];
Here is my react component called "Riders" (I've added comments for help on what I'm trying to do):
import React from 'react';
import { Drivers } from '../api/drivers';
// The 'this.props.names' contains an array of names: ["John", "Susan", "John"].
// How would I iterate over the array, pull the names from this array, and then
// have those names rendered in a paragraph tag in a manner like:
// <p>John - Susan - John</p>
// So far I've attempted using template strings and the braces, {} , javascript
// injection. Doing this renders an empty paragraph. Please let know of the proper
// way to complete this task. Any help would be greatly appreciated. :)
export default class Riders extends React.Component {
renderNames() {
let empty = ``
let names = this.props.names;
let namesLength = names.length;
for (var i = 0; i < namesLength; i++) {
empty[i] = empty + `-` + ` ${empty[i]}`
}
return empty;
}
render() {
return (
<div>
<p>{this.renderNames}</p>
</div>
);
}
}
You have some errors in your code.
First of all you need to call renderNames when rendering
<p>{this.renderNames()}</p>
Then renderNames implementation is incorrect.
empty is a string which are immutable in js. You can't mutate one using indices empty[i] = something
You should check that current element is not first. Since you don't want to insert separator before the first element
Whole loop is redundant. There is a special method join to join array of strings with a given separator.
So renderNames could be a simple as return this.props.names.join(' - ')
So this works now! Here's the implementation of the Join method as suggested by #Yury:
import React from 'react';
import { Drivers } from '../api/drivers';
export default class Riders extends React.Component {
renderNames() {
return this.props.riders.join(' - ');
}
render() {
return (
<div>
<p>{this.renderNames()}</p>
</div>
);
}
}
Reference to the "Join()" method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join?v=control
Have a look at the JS .map method https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map?v=control
With that you can just do something like:
let returnString = "";
this.props.names.map((item) => {
//TODO: add something to check if it's the last item
returnString += item + " - "
})
As indicated you should use {this.renderNames()}. Check the below example
export default class React.Component {
constructor(props) {
super(props);
}
renderNames() {
let empty = ``
let names = this.props.names;
let namesLength = names.length;
for (var i = 0; i < namesLength; i++) {
empty = empty + `-` + ` ${names[i]}`
}
return empty;
}
render() {
return(
<div>
{this.renderNames()}
</div>
)
}
}
I'm looking at a line of code that has dynamically named refs for an input, where 'item' is an incrementing value starting at zero.
"input type="text" ref={'name'+item} defaultValue={item} />"
How would I loop through these dynamic refs to scrape out the values? I tried this with no luck. It tells me object undefined. (the length of inputs will equate to the number of added elements)
var arr = this.state.inputs;
var arrayLength = arr.length;
for (var i = 0; i < arrayLength; i++) {
var c = this.refs.name + i.value
alert(c);
}
Though, this DOES work, but its dynamic, so I need to loop through it, not hard code it:
alert(this.refs.name0.value);
alert(this.refs.name1.value);
alert(this.refs.name2.value);
I believe you need to get the DOM objects for the inputs, not just the refs (at least that has been my experience):
import ReactDOM from 'react-dom';
const values = {};
Object.keys(this.refs)
.filter(key => key.substr(0,4) === 'name')
.forEach(key => {
values[key] = ReactDOM.findDOMNode(this.refs[key])).value || null;
});
Good luck!
I want to use an array of id, for my little slider-viewer I'm building. I just want to display multiple things using 2 buttons next and previous.
For now I use something like this, using only 2 url id, but I need at least 20 urlid in my viewer :
var urlid1 = 'd3885ca76ac54e958c2855a4fbd3dbf3';
var urlid2 = '3aa64527d1614998b4812bfefbbc896a';
function Next() {
client.init( urlid2 );
}
function Previous() {
client.init( urlid1 ); }
So I've never use an array before, and the things I tried didn't work. Do you know a proper way to do that ?
This seems straight forward enough
var index = 0;
var array = ["url1", "url2", "url3", ...]
function next() {
index++;
if(index > array.length) {
index = 0;
}
client.init(array[index]);
}
function previous() {
index--;
if(index < 0) {
index = array.length;
}
client.init(array[index]);
}
It may be better practice to actually refactor those changes to the index variable to other functions to enable reuse, but this should give you an idea of how it is done.
If client is something that you have wrote then you might want to look at the naming of your functions, init is normally reserved for instantiating the class as new, from your example you seem to be changing a resource so you may want a function name like client.show(); or client.update();
Thank's Varedis.
Final code is :
var index = 0;
var array = ["0e4b4e0789bf41c7b05129a76de0abb0","3aa64527d1614998b4812bfefbbc896a","d3885ca76ac54e958c2855a4fbd3dbf3","8f927023e10c40b9b22d3c13df7c08aa"];
client.init(array[index]);
function next() {
index++;
if(index >= array.length) {
index = 0;
}
client.init(array[index]);
}
function previous() {
index--;
if(index < 0 ) {
index = array.length-1;
}
client.init(array[index]);
}
I had to use " index = array.length-1; " but I can't explain it. You know why ? How index could be 5 if I only have 4 values ?