I'm building a sidebar menu with submenu levels, and I'm using this code to build the menu and the submenus:
Sidebar menu:
import React from 'react';
import SidebarMenuItem from './SidebarMenuItem';
var menuData = require("./data/menu.json");
class SidebarMenu extends React.Component {
constructor(props)
{
super(props);
this.state = { expanded: true };
};
render() {
return (
<div>
{
menuData.map((item, index) => <SidebarMenuItem id={ index.toString()} key={index.toString()} {...item} />)
}
</div>
);
};
}
export default SidebarMenu;
SidebarMenuItem:
import React from 'react';
class SidebarMenuItem extends React.Component {
render() {
console.log(this.props.id);
return (
<div>
<a href={this.props.link}>{this.props.title}<i className={'fa ' + this.props.icon}/></a>
{this.props.submenu ? this.props.submenu.map((subitem, index) => <SidebarMenuItem key={this.props.id + index.toString()} {...subitem} />) : null }
</div>
)
}
}
SidebarMenuItem.propTypes = {
id: React.PropTypes.string,
key: React.PropTypes.string,
title: React.PropTypes.string,
ref: React.PropTypes.string,
icon: React.PropTypes.string,
submenu: React.PropTypes.array
}
export default SidebarMenuItem;
Although I can see the submenus on screen, I'm getting the following error:
Warning: SidebarMenuItem: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop.
Another clue that something is wrong is the console output:
0
1
undefined <-- I was supposed to get 11 and 12 here, as this option has 2 submenus
2
And finally my menu.JSON data:
[
{
"title": "Option1",
"link": "www.google.com",
"icon": "fa-edit"
},
{
"title": "Option2",
"link": "",
"icon": "fa-hello",
"submenu":
[
{
"title": "SubOption2.1",
"link": "wwww.yahoo.com",
"icon": "fa-asterisk"
},
{
"title": "SubOption2.2",
"link": "wwww.tisafe.com",
"icon": "fa-save"
}
]
},
{
"title": "Option3",
"link": "www.mezasoft.com",
"icon": "fa-save"
}
]
Help appreaciated to find out what's wrong with my code.
You are getting the warning because key is a restricted attribute and cannot be passed as a prop, change it to keyValue. Also you get undefined when you use this.props.id because in your SidebarMenuItem render function for submenus you are still calling the same component and there you are not passing the id as a prop. you can see that in the snippet below. I hope it helps
class SidebarMenu extends React.Component {
constructor(props)
{
super(props);
this.state = { expanded: true };
};
render() {
var menuData = [
{
"title": "Option1",
"link": "www.google.com",
"icon": "fa-edit"
},
{
"title": "Option2",
"link": "",
"icon": "fa-hello",
"submenu":
[
{
"title": "SubOption2.1",
"link": "wwww.yahoo.com",
"icon": "fa-asterisk"
},
{
"title": "SubOption2.2",
"link": "wwww.tisafe.com",
"icon": "fa-save"
}
]
},
{
"title": "Option3",
"link": "www.mezasoft.com",
"icon": "fa-save"
}
];
return (
<div>
{
menuData.map((item, index) => <SidebarMenuItem id={ index.toString()} keyValue={index.toString()} {...item} />)
}
</div>
);
};
}
class SidebarMenuItem extends React.Component {
render() {
console.log('in render',this.props);
return (
<div>
<a href={this.props.link}>{this.props.title}<i className={'fa ' + this.props.icon}/></a>
{this.props.submenu ? this.props.submenu.map((subitem, index) => <SidebarMenuItem keyValue={this.props.id + index.toString()} {...subitem} />) : null }
</div>
)
}
}
SidebarMenuItem.propTypes = {
id: React.PropTypes.string,
keyValue: React.PropTypes.string,
title: React.PropTypes.string,
ref: React.PropTypes.string,
icon: React.PropTypes.string,
submenu: React.PropTypes.array
}
ReactDOM.render(<SidebarMenu/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>
Related
import React, { Component } from 'react';
import { ActivityIndicator, FlatList, Text, View } from 'react-
native';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
isLoading: true
};
}
async getMovies() {
try {
const response = await
fetch('https://reactnative.dev/movies.json');
const json = await response.json();
this.setState({ data: json.movies });
} catch (error) {
console.log(error);
} finally {
this.setState({ isLoading: false });
}
}
componentDidMount() {
this.getMovies();
}
render() {
const { data, isLoading } = this.state;
return (
<View style={{ flex: 1, padding: 24 }}>
{isLoading ? <ActivityIndicator/> : (
<FlatList
data={data}
keyExtractor={({ id }, index) => id}
renderItem={({ item }) => (
<Text>{item.title}, {item.releaseYear}</Text>
)}
/>
)}
</View>
);
}
};
this is the api
{
"title": "The Basics - Networking",
"description": "Your app fetched this from a remote endpoint!",
"movies": [
{ "id": "1", "title": "Star Wars", "releaseYear": "1977" },
{ "id": "2", "title": "Back to the Future", "releaseYear": "1985" },
{ "id": "3", "title": "The Matrix", "releaseYear": "1999" },
{ "id": "4", "title": "Inception", "releaseYear": "2010" },
{ "id": "5", "title": "Interstellar", "releaseYear": "2014" }
]
}
I want this code to fetch and show data by id. just like the query show movies by id.
This is the result.
I try to fetch data with id 1 but i dont know how to do it. i dont know how to show it to react native. and i dont know how fetch the data by id
I pass a parameter like this:
my call to the API:
const getDetails = (id) => {
return api.Get(`/api/details/${id}`);
}
then in the react code
const getInfo = async(e) => {
apiCall.GetDetails(value to be passed here)
}
In my React component I am not able to render a dynamic tab from a JSON object.
I am able to retrieve the JSON data key and the value array, but I am not able to render it in the UI.
I am using PrimeReact UI components.
https://www.primefaces.org/primereact/#/tabview
Component
export default class Report extends Component {
render() {
const { splitGroupedStartingMaterials } = this.state
return (
<div>
<TabView>
{
Object.keys(splitGroupedStartingMaterials).forEach(k => {
console.log('k : ' + k, JSON.stringify(splitGroupedStartingMaterials[k]));
return (<TabPanel header={'Family'}>
simple content here for testing
</TabPanel>);
})
}
</TabView>
</div>);
}
}
JSON Data :-
"splitGroupedStartingMaterials": {
"1": [
{
"id": 45598,
"symbol": "Mn",
"description": "Mn(NO3)2 (fr mn flake)_[10377-66-9]",
"priority": 1,
"matrices": "HNO3",
"family": "F2.0",
"splitGroup": "1"
},
{
"id": 45636,
"symbol": "Ti",
"description": "(NH4)2TiF6 (as Ti)_[16962-40-6]",
"priority": 2,
"matrices": "F- : HNO3",
"family": "F1.1",
"splitGroup": "1"
}
],
"2": [
{
"id": 45572,
"symbol": "Cr",
"description": "CrCl3 (fr Cr shot)_[10025-73-7]",
"priority": 2,
"matrices": "HCl",
"family": "F3.1",
"splitGroup": "1_2"
}
]
}
Update:-
Console Logs:-
10:46:28.769 InOrganicCreateCustomQuote.jsx:704 k : 1 [{"id":45621,"symbol":"Sc","description":"Sc2O3 (as Sc)_[256652-08-1]","priority":1,"matrices":"HNO3","family":"F2.0","splitGroup":"1"},{"id":45636,"symbol":"Ti","description":"(NH4)2TiF6 (as Ti)_[16962-40-6]","priority":2,"matrices":"F- : HNO3","family":"F1.1","splitGroup":"1"},{"id":45640,"symbol":"V","description":"V2O5 (as V)_[1314-62-1]","priority":1,"matrices":"HNO3","family":"F2.0","splitGroup":"1"}]
10:46:28.770 InOrganicCreateCustomQuote.jsx:704 k : 2 [{"id":45646,"symbol":"Zr","description":"ZrCl2O (as Zr)_[7699-43-6]","priority":1,"matrices":"HCl","family":"F3.1","splitGroup":"1_2"}]
For this code no tabs are rendered
Could you try:
export default class Report extends Component {
render() {
const { splitGroupedStartingMaterials } = this.state
return (
<div>
<TabView>
{
Object.keys(splitGroupedStartingMaterials).map(k => (
<TabPanel header={'Family'}>
simple content here for testing
</TabPanel>
))
}
</TabView>
</div>);
}
}
I want to structure the data that I get from a server, so I can use the TreeView component from Material UI: https://material-ui.com/api/tree-view/
I'm fetching large amounts of data so I want to fetch child nodes from the server when the user clicks on the expand button. So
when the first node is expanded a HTTP request is sent to a server which returns all of the children of that node. When another node is expanded the children of that node is fetched etc.
On startup of the page I want to fetch the root node and its children. The JSON returned will look something like this:
{
"division": {
"id": "1234",
"name": "Teest",
"address": "Oslo"
},
"children": [
{
"id": "3321",
"parentId": "1234",
"name": "Marketing",
"address": "homestreet"
},
{
"id": "3323",
"parentId": "1234",
"name": "Development",
"address": "homestreet"
}
]
}
When expanding the Marketing node I want to make a HTTP call to fetch the children of this node. So I would get JSON like this:
{
"children": [
{
"id": "2212",
"parentId": "3321",
"name": "R&D",
"address": "homestreet"
},
{
"id": "4212",
"parentId": "3321",
"name": "Testing",
"address": "homestreet"
}
]
}
But I am confused on how to create such a data structure which can later be used my the TreeView component. How can I create such a structure?
For anyone still looking for a solution to this problem I've recently tackled it using a combination of the selected and expanded props in the TreeView API. See this Code Sandbox demo for an example of how to asynchronously load new children and expand their parent once they are loaded.
import React from "react";
import TreeView from "#material-ui/lab/TreeView";
import ExpandMoreIcon from "#material-ui/icons/ExpandMore";
import ChevronRightIcon from "#material-ui/icons/ChevronRight";
import TreeItem from "#material-ui/lab/TreeItem";
import TreeNode from "./TreeNode";
const mockApiCall = async () => {
return new Promise((resolve) => {
setTimeout(() => {
const nextId = Math.ceil(Math.random() * 100);
resolve([
{
id: `${nextId}`,
name: `child-${nextId}`,
children: []
},
{
id: `${nextId + 1}`,
name: `child-${nextId + 1}`,
children: []
}
]);
}, Math.ceil(Math.random() * 1000));
});
};
export default class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
expanded: [],
selected: "1",
tree: new TreeNode({
id: "1",
name: "src",
children: []
})
};
}
handleChange = async (event, nodeId) => {
const node = this.state.tree.search(nodeId);
if (node && !node.children.length) {
mockApiCall()
.then((result) => {
this.setState({ tree: this.state.tree.addChildren(result, nodeId) });
})
.catch((err) => console.error(err))
.finally(() => {
this.setState({
selected: nodeId,
expanded: [...this.state.expanded, nodeId]
});
});
}
};
createItemsFromTree = (tree) => {
if (tree.children.length) {
return (
<TreeItem key={tree.id} nodeId={tree.id} label={tree.name}>
{tree.children.length > 0 &&
tree.children.map((child) => this.createItemsFromTree(child))}
</TreeItem>
);
}
return <TreeItem key={tree.id} nodeId={tree.id} label={tree.name} />;
};
render() {
return (
<TreeView
defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpandIcon={<ChevronRightIcon />}
selected={this.state.selected}
onNodeSelect={this.handleChange}
expanded={this.state.expanded}
>
{this.createItemsFromTree(this.state.tree)}
</TreeView>
);
}
}
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
I have this JSON below for example and I need to get the name of genres.
{
"adult": false,
"backdrop_path": "/5qxePyMYDisLe8rJiBYX8HKEyv2.jpg",
"budget": 178000000,
"genres": [
{
"id": 12,
"name": "Adventure"
},
{
"id": 28,
"name": "Action"
},
{
"id": 53,
"name": "Thriller"
}
],
"homepage": null
}
But when I use the map function the React return a error:
TypeError: this.state.persons.map is not a function
class Content extends React.Component {
state = {
persons: []
}
componentDidMount() {
axios.get(Config.apiUrl + 353081 + Config.apiKey)
.then(res => {
const persons = res.data;
this.setState({ persons });
})
}
render() {
return (
<div>
<Grid>
<Grid item xs={9}>
<Typography gutterBottom={true}><b>Budget:</b> { this.state.persons.budget }</Typography>
<Typography gutterBottom={true}><b>Genres:</b> { this.state.persons.map(person => <li key={person.genres.id}>{person.genres.name}</li>) }</Typography>
</Grid>
</Grid>
</div>
);
}
}
I think you state should be an object literal {}, not []. Also res.data returns an {..}, not []. If it returns an array, then this.state.persons.budget should throw error, but it doesn't. That proves, persons state is not an array.
state = {
persons: {
genres: []
}
}
And then
<Typography gutterBottom={true}>
<b>Genres:</b>{" "}
{this.state.persons.genres.map(genre => <li key={genre.id}>{genre.name}</li>)}
</Typography>;