I am attempting to create a data table with react-data-grid with my own data. First I attempted to recreate the getting started example and I get the error
"TypeError: Cannot read property 'map' of undefined" at
.../node_modules/react-data-grid/dist/react-data-grid.js:1094.
I installed everything properly, I'm not sure why this is happening when I'm literally just following the tutorial.
Initially started with my own data, then I used the same exact data from the example and it still has the same error.
Using tutorial at this link: https://adazzle.github.io/react-data-grid/docs/quick-start
render(){
const columns = [
{ key: 'id', name: 'ID' },
{ key: 'title', name: 'Title' },
{ key: 'count', name: 'Count' } ];
const data = [{id: 0, title: 'row1', count: 20}, {id: 1, title: 'row1',
count: 40}, {id: 2, title: 'row1', count: 60}];
return (
<div>
<ReactDataGrid>
columns={columns}
rowGetter={i => data[i]}
rowsCount={3}
minHeight={150}
</ReactDataGrid>
</div>
);
}
Your issue is you are closing the tag before trying to pass props. aka
<ReactDataGrid>
^-------------^
open close
This means that the props would be treated as "children" in the React ecosystem (Anything that is inbetween the component tags is considered children, I'm a little surprised this compiles, partly why I like to use typescript to get syntax issue warnings like this).
In React, the way you pass properties is on the tag itself before closing it.
<ReactDataGrid prop1={something}>
---------------^-----------------
^ prop on component before closing tag
To fix your current implementation just change it to this :)
<ReactDataGrid
columns={columns}
rowGetter={i => data[i]}
rowsCount={3}
minHeight={150}
/>
See a working example here
Related
I'm creating this menu as a fun project in React, and I've finished the code to display/style the components, so now I'm setting it up to be dynamic and generate the menu based on a passed set of data. My React project routes like this:App /→Tab /→Various components based on data.
The plan is to have a menu (App/) contain potentially multiple Tab / of various inputs, such as date, text, number, range, etc. Let's say I use this dataset as an example:
elements: [
{
type: 'number',
text: 'Some Text Label',
fields: [
{
text: 'Some Text',
min: 0,
max: 50,
value: 25,
},
{
text: 'Some Text',
min: 25,
max: 75,
value: 50,
},
],
},
{
type: 'text',
text: 'Some Text Label',
fields: [
{
text: 'Some Text',
value: 'Some Text Placeholder',
},
],
},
{
type: 'number',
text: 'Some Text Label',
fields: [
{
text: 'Some Text',
min: 0,
max: 100,
value: 50,
},
],
},
]
Within the Tab / component, I'd want to look through the elements to find the type of one element, then use the component that is ready for that element (for example, type:number, I would use Number / and then pass the fields as a prop to that component.
Something like this:Number fields={insertdatahere}/>
I'm a total beginner when it comes to react, but I've tried a few ways myself and I feel like I'm just missing something because nothing is working. I was considering just having all the Components manually placed inside the tab component and having them set as Display: None unless an element is present for that type. Thanks for any advice.
Here's a Code sandbox which illustrates one way you could get started.
The basic idea is to define a component for each type of field (text, number, ...) and make a lookup. A function component is like any other value in Javascript - you can store it in an array or an object.
In this case I've defined TextDisplay and NumberDisplay:
const TextDisplay = ({ text, value }) => (
<li>
<h4>{text}</h4>
<input value={value} />
</li>
);
const NumberDisplay = ({ text, min, max, value }) => (
<div>
<h4>{text}</h4>
<input type="number" min={min} max={max} value={value} />
</div>
);
const ComponentForType = {
text: TextDisplay,
number: NumberDisplay
};
Then there's a bit of machinery for displaying the lists of elements in the definition, and the list of fields in each element.
Hopefully that can give you something to play around with. There's a bit of weird syntax in there like the spread operator, and everything gets complicated once you want to make the values editable, but this could be a starting point.
I need to retrieve data from the server then I display this data in a table and if a user clicks on a button in the table he can download the file
Here is my data :
files = [ {name : "file1", created_at: "29/01/2021"},
{name : "file2", created_at: "20/03/2021"}]
table headers :
const tableColumns = [
{ title: "name", field: "name" },
{
title: "Date",
field: "created_at",
type: "date",
dateSetting: { locale: "en-GB" },
filterComponent: (props) => <CustomDatePicker {...props} />
}
];
My array :
{file && (
<Fragment>
<MaterialTable
columns={tableColumns}
data={file}
title="Material Table - Custom Filter Component"
options={{search: false, filtering: true }}
actions={[
{
icon: 'save',
tooltip: 'Save User',
onClick: () => window.open('http://localhost:5000/files/' + file.name, '_blank').focus()
}
]}
/>
</Fragment>)}
I get the error: ENOENT: no such file or directory, stat '/Users/admin//files/undefined'"}
how can i use in react js the link of each file, i tried to use the map function on my data but it doesn't work
Even it works on your computer, the code won't work in a public server. because no one knows what is http://localhost:5000.
In order to get that line working, you need to find a resources that can be reached in your browser, ex. google.com
And then give it a shot and see if you still run into that error.
NOTE: client app such as a website can't work with a physical file in your computer. That is not allowed, but once you publish to the web, it becomes another URL which could store a file.
I am having trouble on posting the lists of data in my table, I hope you guys can help me with this issue, this is the error i am getting Error: Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead.
const columns = [
{
name: "name",
label: "Name",
options: {
filter: true,
sort: true,
}
},
{
name: "dateregistered",
label: "Date Registered",
options: {
filter: true,
sort: false,
}
},
{
name: "department",
label: "Department",
options: {
filter: true,
sort: false,
}
},
];
const data = [
posts.map(post => [{name: 'post.firstname', dateregistered: 'post.date', department: 'post.department'}])
];
return (
<>
<MUIDataTable
title={"Deactivated Users"}
data={data}
columns={columns}
options={options}
/>
</>
)
I see two problems in your data constant. The first one, the .map method returns an array, so there is no need to wrap that value inside an array keys []. The other problem is that you are wrapping the .map return state object in array keys too, that is why the error of creating an object is displayed, because you are returning arrays inside the main mapped array [[{ name: ... }], [{ name: ... }]].
So basically the solution for your issue would be:
const data = posts.map(post => ({name: 'post.firstname', dateregistered: 'post.date', department: 'post.department'}))
Where the parenthesis allows the map method to directly return the object.
The issue is that data is being created as an array in an array in an array. This is why when you try const data = posts.map(post => ...) the error persists, as there is still an array in an array. After you try the above, also re-write
post => [{name: 'post.firstname', dateregistered: 'post.date', department: 'post.department'}]
to
post => ({name: 'post.firstname', dateregistered: 'post.date', department: 'post.department'})
(Changing the square brackets to round)
P.S When you map over posts to build the data, you build a object with the the key "name" and the value "'post.firstname'". That value is a string literal and not accessing some other JS object (It will make "post.firstname" the value for all the post's. Same goes for the other keys.
I have an issue,
I have a select control component, which has options, inside options I'm adding array of options by mapping array staticPosts.
My code:
<SelectControl
label={__("Choose Static Block Page to show above header", "pirezmeta")}
onChange={ (value) => props.onChangeStaticContent(value) }
options={props.staticPosts && props.staticPosts.map(post =>
({value: post.id, label: post.title}))}
value={props.staticContent}
/>
Everything is fine, except I want to add empty option first, something like: {value: 0, label: "No value"}
How can I do it, can you help me, please?
A lot is going on in that prop. I'd declare the array above, separately - include the first {value: 0, label: "No value"} item, then add in the other mapped items:
const options = [
{value: 0, label: "No value"},
...props.staticPosts?.map(
post => ({value: post.id, label: post.title})
)
];
// ...
<SelectControl
label={__("Choose Static Block Page to show above header", "pirezmeta")}
onChange={ (value) => props.onChangeStaticContent(value) }
options={props.staticPosts && options}
value={props.staticContent}
/>
You could also put the combined array into state on mount or when the props change.
I have bean following the official tutorial for react-beautiful-dnd from egghead.io. On lesson 5 persisting the reordering my implementation throws all the time an error but only the second time when I try to reorder the top item. It works fine when I reorder the first time.
This is my branch specific to this question: https://github.com/bogdan-marian/my-react-beautiful-dnd/tree/002-property-id-question
The error that I get when I order the second time is:
TypeError: Cannot read property 'id' of undefined
src/Column.js:31
# and row 31 shows
<Task key={task.id} task={task} index={index} />)}
I'm not able to spot what is wrong with my implementation.
I found the problem. There was a typo bug in my initialData.js
My second task had the id taks-2 instead of task-2. The columns on the other hand was set to point to the task-2. This is how initial data looked before the fix
const initialData = {
tasks: {
'task-1': {id: 'task-1', content: 'Take out the garbage'},
'task-2': {id: 'taks-2', content: 'Watch my favorite show'},
'task-3': {id: 'task-3', content: 'Charge my phone'},
'task-4': {id: 'task-4', content: 'Cook dinner'},
},
columns: {
'column-1':{
id:'column-1',
title:'To do',
taskIds:['task-1','task-2', 'task-3', 'task-4']
}
},
// Facilitate reordering of the columns
columnOrder:['column-1']
}
All I had to do was to updated my second task id to task-2.