I'm trying to map through objects to display their values in my React JS project. It looks like I can't access values of the objects within objects using the map function, values simply are not displayed, or if I try to use (.split("/p")) it gives me an error saying "split is not a function".
Link to codesandbox
this is my code:
import React from "react";
import { studies } from "./studies";
import "./styles.css";
const Data = ({ title, text, number, numberdesc }) => {
return (
<>
<div style={{ margin: "1rem" }}>{title}</div>
<div style={{ margin: "1rem" }}>{text}</div>
<div>{number}</div>
<div>{numberdesc}</div>
</>
);
};
function App() {
const appComponent = studies.map((post, i) => {
console.log(studies);
return (
<Data
key={i}
number={studies[i].post.number}
title={studies[i].post.title}
text={studies[i].post.text
.split("/p")
.reduce((total, line) => [total, <br />, <br />, line])}
/>
);
});
return <>{appComponent}</>;
}
export default App;
and {studies} file:
export const studies = [
{
id: "first",
text: "1st Post",
post: {
data: [
{ number: "100", numberdesc: "description1" },
{ number: "200", numberdesc: "description2" },
{ number: "300", numberdesc: "description3" }
],
text: [
{
title: "Title1 from the 1st post",
text: "Text1 from the 1st post."
},
{
title: "Title2 from the 1st post",
text: "Text2 from the 1st post."
},
{
title: "Title3 from the 1st post",
text: "Text3 from the 1st post"
}
]
}
},
{
id: "second",
text: "2nd Post",
post: {
data: [
{ number: "100", numberdesc: "description1" },
{ number: "200", numberdesc: "description2" },
{ number: "300", numberdesc: "description3" }
],
text: [
{
title: "Title1 from the 2nd post",
text: "Text1 from the 2nd post "
},
{
title: "Title2 from the 2nd post",
text: "Text2 /p from the 2nd post"
},
{
title: "Title3 from the 2nd post",
text: "Text3 from the 2nd post"
}
]
}
}
];
What I want to do is to access data and text values for each post, and display them in my Project. Any help and suggestion is greatly appreciated,
Thank you.
I think you may be wanting to .map your array of content. For example:
text={studies[i].post.text.map(t => <p><strong>{t.title}</strong>: {t.text}</p>)}
might replace the existing line that is breaking.
Is this what you're looking for?
function App() {
const appComponent = studies.map(study =>
study.post.data.map((data, k) => (
<Data
key={k}
number={data.number}
numberdesc={data.numberdesc}
title={study.post.text[k].title}
text={study.post.text[k].text}
/>
))
);
return <>{appComponent}</>;
}
Note I arbitrarily zipped data[k]'s number and numberdesc with text[k]'s title and text, but that might not necessarily be what you intend to display.
The above will likely break in case your data and text arrays do not have the same length in any given study.
See it here.
Related
im new to React, so i trying to make a pokemon web app, basically i have a list of data (Data.js) that imported it in another file (PokemonList.js), i mapped that list and rendered all the names in button form, then i want to know how i make every button display that pokemon info ??
Data.js:
export const Data =[
{
id: "1",
name: "arbok",
imageUrl: '../pokemon_images/arbok.png',
desc: "This is Pokemon arbok",
Height : "200 cm",
Weight: "100 kg",
Stat : {
hp : "80",
attack : "82",
defense : "83",
special_attack : "100",
special_defense : "100",
speed : "80",
},
},
{
id: "2",
name: "arcanine",
imageUrl: "",
desc: "This is Pokemon arcanine",
Height : "210 cm",
Weight: "110 kg",
Stat : {
hp : "81",
attack : "83",
defense : "84",
special_attack : "110",
special_defense : "110",
speed : "81",
},
},
PokeList.js
import { Data } from "./Data";
import "./PokeList.css"
import { useState } from "react";
function PokeList() {
const [pokeInfo , setPokeInfo] = useState({
name: "",
desc: ""
})
const handleClick=() => {
setPokeInfo({
})
}
return (
<div className="app-container">
<div className="pokemon-container">
<div className="all-container">
{Data.map((el)=> {
return (
<>
<button onClick={handleClick(el)}> {el.name} </button>
</>
)
}
)}
</div>
</div>
</div>
)
}
export default PokeList;
As you guys can see the code is incomplete and i really have no idea what to do
You'll simply need to do these changes
Change handleClick function to this
const handleClick=(el) => {
setPokeInfo({
name: el.name,
desc: el.desc
})
}
and return function to this
return (
<>
<button onClick={handleClick(el)}> {el.name} {el.desc}</button>
</>
)
This would not 100% map as the answer to your question. But if you share a working JSFiddle with your code - we'll be able to help you out more
I am novice at this. I am trying to save the values form the DataGridPro MUI, I am using a TreeData. How can i save Values of the Cells after i edit them. I watched a video online in by which i was able to understand how it will work on a Single DataTable, But for the Parent one, i dont know how i will be able to save it. I have looked up but i found no method which could be helpful. I am getting the values from the GridColumn and GridRowsProp.
Basically i want to save the values of the children. how can i save them?
Thanks.
import * as React from "react";
import { DataGridPro, GridColumns, GridRowsProp, DataGridProProps } from "#mui/x-data-grid-
pro";
import {
GridCellEditCommitParams,
GridCellEditStopParams,
GridCellEditStopReasons,
GridRowModel,
MuiEvent,
} from "#mui/x-data-grid";
import { applyInitialState } from "#mui/x-data-grid/hooks/features/columns/gridColumnsUtils";
const rows: GridRowsProp = [
{
hierarchy: ["Documents"],
rubrics: "Head of Human Resources",
totalMarks: "",
id: 0,
},
{
hierarchy: ["Scope"],
rubrics: "Head of Sales",
totalMarks: "15",
id: 1,
},
{
hierarchy: ["Scope", "Rubric item 1"],
rubrics: "Sales Person",
totalMarks: "2",
id: 2,
},
{
hierarchy: ["Scope", "Rubric item 2"],
rubrics: "Sales Person",
totalMarks: "5",
id: 3,
},
{
hierarchy: ["Scope", "Rubric item 3"],
rubrics: "Sales Person",
totalMarks: "8",
id: 4,
},
];
const columns: GridColumns = [
{ field: "rubrics", headerName: "Rubric Type", width: 200, editable: true },
{
field: "totalMarks",
headerName: "Total Marks",
width: 150,
editable: true,
},
];
const getTreeDataPath: DataGridProProps["getTreeDataPath"] = (row) => row.hierarchy;
export default function TreeDataSimple() {
const [state, setState] = React.useState<GridRowModel[]>(applyInitialState); //i was seeing online for this how can i add the array here but no luck.
const handleCommit = (e: GridCellEditCommitParams) => {
const array = state.map((r) => {
if (r.id === e.id) {
return { ...r, [e.field]: e.value };
} else {
return { ...r };
}
});
setState(array);
};
return (
<div style={{ height: 400, width: "100%" }}>
<DataGridPro
treeData
rows={rows}
columns={columns}
getTreeDataPath={getTreeDataPath}
onCellEditCommit={handleCommit}
experimentalFeatures={{ newEditingApi: true }}
onCellEditStop={(params: GridCellEditStopParams, event: MuiEvent) => {
if (params.reason === GridCellEditStopReasons.cellFocusOut) {
event.defaultMuiPrevented = true;
}
}}
/>
</div>
);
}}
How can I get and set the filter values programmatically using material-table?
I want users to be able to save filter configurations as reports and recall them as needed.
Get works with a hook on change:
onFilterChange={(filters) => {
console.log('onFilterChange', filters);
}}
result is an array of filter definitions per column, looks like:
[
// [...]
{
"column": {
"title": "Date",
"field": "file_date",
"type": "date",
"tableData": {
"columnOrder": 3,
"filterValue": "2020-11-10T15:20:00.000Z",
"groupSort": "asc",
"width": "...", // lots of css calc stuff... :(
"additionalWidth": 0,
"id": 4
}
},
"operator": "=",
"value": "checked"
}
]
setting the filter on mount could/should work with defaultFilter at each column definition.
There are two parts to this, the get and the set.
Get - handled through the use of the tableRef prop on the MaterialTable component
Set - handled through the defaultFilter value on a column object.
import MaterialTable from "material-table";
import React, { useRef } from "react";
import { tableIcons } from "./tableIcons";
const firstNameFilter = 'Neil'
function App() {
const tableRef = useRef<any>();
return (
<div>
<button onClick={saveFilters(tableRef)}>Filters</button> // GET OCCURS HERE
<MaterialTable
tableRef={tableRef}
icons={tableIcons}
columns={[
{ title: "First", field: "name", defaultFilter: firstNameFilter }, // SET OCCURS HERE
{ title: "Last", field: "surname" }
]}
data={[
{ name: "Neil", surname: "Armstrong" },
{ name: "Lance", surname: "Armstrong" },
{ name: "Bob", surname: "Hope" }
]}
options={{ filtering: true }}
title="Reports"
/>
</div>
);
}
function saveFilters(tableRef: React.MutableRefObject<any>) {
return function handler() {
const columns = tableRef?.current?.state.columns.map((column: any) => ({
field: column.field,
filterValue: column.tableData.filterValue
}));
console.log(JSON.stringify(columns, null, 2));
};
}
export { App };
In my react application, I am implementing a tree view structure to display the api response in more readable format. I am using tree view-react-bootstrap for that.
import React from 'react';
import ReactDOM from 'react-dom';
import TreeView from 'treeview-react-bootstrap'
class Example extends React.Component {
constructor(){
super();
// SET YOUR DATA
this.state = {
data: [
{
text: "John Peter",
nodes: [
{
text: "ID: 11111",
nodes: [
{
text: "VIN"
},
{
text: "Policy Effective Date"
},
{
text: "Policy Expiration Date"
},
{
text: "Vehicle Make"
},
{
text: "Vehicle Model"
}
]
},
{
text: "ID: 123456",
nodes: [
{
text: "VIN"
},
{
text: "Policy Effective Date"
},
{
text: "Policy Expiration Date"
},
{
text: "Vehicle Make"
},
{
text: "Vehicle Model"
}
]
}
]
},
{
text: "Scott Brown"
}
]
}
}
render(){
return (
// RENDER THE COMPONENT
<TreeView data={this.state.data} />
);
}
}
export default Example
I am using dummy data for now but this is the format that I want my data to be displayed. The api response I have is "array of objects" and it is only in one level JSON format.
Sample response -
[
{
"id": "1234",
"name": "John Scott",
"vin": "45",
"make": "Toyota",
"model": "Etios"
},
{
"id": "4567",
"name": "James Scott",
"vin": "67",
"make": "Hyundai",
"model": "Etios"
}
]
If you see the response, I would like my key value to be printed in a tree structure.
Is there a way I can render this response to accommodate with treeview-react-bootstrap?
I am not sure if I need to use map function inside my render method to iterate and display the data and how will it work along.Can someone let me know if I am doing it right or is there any better way of doing it. thanks in advance.
You can transform the response something like this. Have just added a dummy response. Please check the following code and let me know if this helps:
import React from "react";
import ReactDOM from "react-dom";
import TreeView from "treeview-react-bootstrap";
import axios from "axios";
class Example extends React.Component {
constructor() {
super();
// SET YOUR DATA
this.state = {
data: []
};
}
componentDidMount() {
axios
.get("https://www.mocky.io/v2/5bb85d723000005f00f93bb6")
.then(data => {
let transformedData = data.data.map(d => {
return {
text: d.text,
nodes: [
{
text: "dummy 1",
nodes: []
}
]
};
});
this.setState({ data: transformedData });
});
}
render() {
return (
// RENDER THE COMPONENT
<TreeView data={this.state.data} />
);
}
}
ReactDOM.render(<Example />, document.getElementById("app"));
You can also see it in action here: https://codesandbox.io/s/73ryny9ywq?autoresize=1&hidenavigation=1
How would i go about rendering a menu with nested <ul> items with an an unknown amount of children in react from an object like in the following example?
[
{
title: "Top level 1",
slug: "top-level-1",
children: [
{
title: "Sub level 1",
slug: "sub-level-1",
children: [
{
title: "Sub Sub Level 1"
slug: "sub-sub-level-1"
}
]
}
{
title: "Sub level 2",
slug: "sub-level-2"
}
]
},
{
title: "Top level 2",
slug: "top-level 2"
}
]
Codesandbox example
You just have to recursively call Menu component for its children to display and pass as a data prop.
let data = [
{
title: "Top level 1",
slug: "top-level-1",
children: [
{
title: "Sub level 1",
slug: "sub-level-1",
children: [
{
title: "Sub Sub Level 1",
slug: "sub-sub-level-1",
children: [
{
title: "Sub Sub Level 2",
slug: "sub-sub-level-2"
}
]
}
]
},
{
title: "Sub level 2",
slug: "sub-level-2"
}
]
},
{
title: "Top level 2",
slug: "top-level 2"
}
];
const Menu = ({data}) => {
return (
<ul>
{data.map(m => {
return (<li>
{m.title}
{m.children && <Menu data={m.children} />}
</li>);
})}
</ul>
);
}
const App = () => (
<div style={styles}>
<Hello name="CodeSandbox" />
<h2>Start editing to see some magic happen {'\u2728'}</h2>
<Menu data={data} />
</div>
);
You could recursively Render the component for nested data which has variable depth.
Sample Snippet.
var data = [
{
title: "Top level 1",
slug: "top-level-1",
children: [
{
title: "Sub level 1",
slug: "sub-level-1",
children: [
{
title: "Sub Sub Level 1",
slug: "sub-sub-level-1"
}
]
},
{
title: "Sub level 2",
slug: "sub-level-2"
}
]
},
{
title: "Top level 2",
slug: "top-level 2"
}
]
const MyComponent = (props) => {
if(Array.isArray(props.collection)) {
return <ul>
{props.collection.map((data)=> {
return <li>
<ul>
<li>{data.title}</li>
<li>{data.slug}</li>
<li><MyComponent collection={data.children}/></li>
</ul>
</li>
})
}
</ul>
}
return null;
}
class App extends React.Component {
render() {
return (
<MyComponent collection={data}/>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
P.S. The snippet contains formatting errors, but I am sure you will be able to rectify that. Snippet was to give an idea of the approach