I am fairly new to React and React native, but I have bumped into a problem when populating a SectionList and could not find a solution yet.
I have an array of objects, and each object has it's own array. A SectionList is ideal to display this info, however, the array for each section is not called "data", while SectionList seems to expect the key "data" for the array in each section.
Is there a way to tell the SectionList to use another key instead of the data key to populate each section's array?
As Per my Knowledge on SectionList each Section will Expect a data and Key .
What you can do is modify your Data as per that.
like for Eg :
your data is [[1,2,3],[4,5],[6,7]]
what you can do is iterate through this array and push each subArray into New Array With Format {key:index,data:subArray}
hope this will Help :)
Related
I'm making a scheduling app, and storing all the scheduled things in firebase with arrays. When I try to schedule something with the same string value, it fails and doesn't add it to the array. I don't know if this is something in swift I can edit, or if it's a firebase setting.
If it's something in swift, here's the code updating the array:
doc.updateData([
"Instructor": FieldValue.arrayUnion(["\(scheduleinstructor)"])
])
If it's something in firebase, could someone please explain a way around this or a simple fix I overlooked?
According to the documentation on adding items to an array:
arrayUnion() adds elements to an array but only elements not already present
So the fact that the duplicate entry is not added is by design. If you want to allow that, you'll have to:
Read the document with the array from the databae.
Extract the array from the document into your application code.
Add the item to the array.
Write the entire modified array back to the database.
I'm using Material Table for managing workstations. Some of the data I receive are arrays, they are automatically iterated and displayed in cell but without commas.
Current behavior picture
What I'm trying to achieve
I feel like overriding whole cell component is overkill and I would like to avoid modyfing fetched array. Is there is any way that I can modify that iteration done by Material Table at "MTableCell" component ? Or maybe there is some smarter way of doing this ?
Assuming attribs is your data as array (as shown in the picture):
const attribs = ['ATTRIBUTE1', 'ATTRIBUTE2', 'ATTRIBUTE3'];
You can use reduce to convert that to a comma-separated string:
const separated = attribs.reduce((prev, current) => `${prev},${current}`);
And then feed that into the material table cell. You can check a simple example here: https://codesandbox.io/s/basictable-material-demo-forked-19c9z?file=/demo.js
I'm trying to convert an Object array into an array without use "let item of array" on html, I already google a lot but nothing that I find works.
Why I don't use loops? because I pretend to display data inside a page that comes from a liteSQL database, so all the data that I extract from that it's an Object and sure I can display the data without issues if I use a loop like "let item of array" but in this case I just want to show information on the HTML like item.name or item.avatar
Thanks in advance for any help, If you guys need more information please let me know.
The database have students so every array have: name, age, avatar, etc, so I try to show some like a profile after they tap the name on the list
EDIT:
What you are receiving from your server is an array of objects.
array of objects ->
[{
key1:vlaue1,
key2:value2
},
{
key1:vlaue1,
key2:value2
}]
You refer the values here by using array[0]['key1'] array[0]['key2'] and so on
In your case, you are receiving only one object in the array, so simply use array[0].name array[0].age and so on
Thanks for the help, I actually found the solution by my self, I just need to use:
item: array = <array>{};
in order to use my object array as a simple array items without any loop on html
Question Is it possible to render a dictionary with a key (which isn't known until an algorithm is run) with a value that is an array, itself with a dictionary with unknown key-value pairs until an algorithm is run?
Detailed information
I have this dictionary:
var currentWorkers = = {EmployeesAtRestaurant :
[{"James" : "Manager"},
{"Jessica" : "Waiter"},
{"Bob" : "Waiter"},
{"Ben" : "Chef"}],
EmployeesAtOffice :
[{"Rebecca" : "Manager"},
{"Nicole" : "Part-time Employee"},
{"Robert" : "Full-time Employee"},
{"Eric" : "Full-time Employee"}],
EmployeesAtZoo :
[{"Robert" : "Manager"},
{"Naomi" : "Part-time Employee"},
{"Jennifer" : "Full-time Employee"},
{"Ken" : "Full-time Employee"}]}
And I want to render it on a page as below (mock up). It is to display employees of an organisation:
What I've tried
I've read some previous answers on Stack (Push component to array of components - ReactJS) of how to attempt this, but their dictionaries use a simple key and value pair, and since my key is not known (i.e I can't do dictionary.Organisation for example) I'm not able to do the above.
I've tried to remodel the dictionary into a model similar to the above, but then I lose a lot of the information above.
Frankly, I'm beginning to suspect my best option is to just remodel the dictionary at this point, if the above is too difficult to attempt.
To make sure I'm understanding your question: Are you talking about the special prop called key[1] that React uses for rendering?
If that's the case, the important thing is that each key is unique, but it doesn't necessarily have to be the same key that your algorithms are calculating.
If you don't have access to the results of your algorithm yet, but you still want to render the strings like in your screenshots, you'll need a different unique key to use while mapping.
The map function on Arrays sends the element as the first function parameter, and the element's index as the second parameter[2]. Lots of places will warn you that index keys aren't the best. As far as I know, this is because if the order of the Array shifts then you lose the optimization that React is trying to provide you.
If index is the only unique data you've got, however, it's reasonable to consider using it. This is especially true if the data is coming from a static source, because you know that the order of the data isn't going to shift out from under you.
Let me know if I've misunderstood your question.
https://reactjs.org/docs/lists-and-keys.html#keys
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
I am often torn on wether or not should I be using a key value pair data structure or an array in React when representing a collection of uniquely identifiable objects.
For example, say we would like a component to receive a collection of messages. Is there anything wrong with modeling them like this,
{
message1: {from:"bill" , to:"frank"},
message2: {from:"Jill" , to:"sammy"}
}
or similarly as an ES6 map, should we use an array of objects like this
[
{name:"message1" , from:"bill" , to:"frank"},
{name:"message2" , from:"Jill" , to:"sammy"}
]
I would like to know if there is some kind of best practice regarding the use of key value data structures in React.
In my opinion it's better to use objects, even if it's more easier to list/map through the data when using arrays, in most cases you'll want to edit specific elements and an object with the identifier as key will help a lot.
This provides some useful details:
https://www.youtube.com/watch?v=aJxcVidE0I0&t=415s