How to display nested array data in JSON in ReactJS?
I have problem to display nested array data that I retrieved from api call. The JSON data format is like:
[
{
pageNo: 1
TotalRecordsCount: 8000,
Items: [
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
...
}
]
Edit data format:
Items: [{subject: ACCOUNTING, CAMPUS: CAMPUS A}, {subject: ACCOUNTING, campus: CAMPUS A}...]
PageNo: 1
TotalRecordCount: 8000
in JSON format.
How to access subject, campus, etc. data in ReactJS? I got the error message: Objects are not valid as a React child (found: object with keys {courseItem}).
App.js
import React, { Component } from 'react';
import axios from 'axios';
class App extends Component {
constructor() {
super();
this.state ={
courses:
};
}
componentDidMount(){
axios.get('myURL')
.then(response=>{
this.setState({
courses:response.data
});
});
}
_getCourses(){
const data=this.state.courses;
const courseItem=data.map((course,index)=>(
<div>
Page No: course.ageNo <br />
<div className="courseItem"><ul>
Course: <li>ID:{course.id}
SUBJECT:{course.subject}
CAMPUS: {course.campus} </li>
</ul></div>
</div>
));
render() {
const courses= this._getCourses();
return (
<div className="App">
<div className="courseResults">
{courses}
</div>
</div>
);
}
}
export default App;
Thanks.
reactjs
add a comment |
I have problem to display nested array data that I retrieved from api call. The JSON data format is like:
[
{
pageNo: 1
TotalRecordsCount: 8000,
Items: [
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
...
}
]
Edit data format:
Items: [{subject: ACCOUNTING, CAMPUS: CAMPUS A}, {subject: ACCOUNTING, campus: CAMPUS A}...]
PageNo: 1
TotalRecordCount: 8000
in JSON format.
How to access subject, campus, etc. data in ReactJS? I got the error message: Objects are not valid as a React child (found: object with keys {courseItem}).
App.js
import React, { Component } from 'react';
import axios from 'axios';
class App extends Component {
constructor() {
super();
this.state ={
courses:
};
}
componentDidMount(){
axios.get('myURL')
.then(response=>{
this.setState({
courses:response.data
});
});
}
_getCourses(){
const data=this.state.courses;
const courseItem=data.map((course,index)=>(
<div>
Page No: course.ageNo <br />
<div className="courseItem"><ul>
Course: <li>ID:{course.id}
SUBJECT:{course.subject}
CAMPUS: {course.campus} </li>
</ul></div>
</div>
));
render() {
const courses= this._getCourses();
return (
<div className="App">
<div className="courseResults">
{courses}
</div>
</div>
);
}
}
export default App;
Thanks.
reactjs
add a comment |
I have problem to display nested array data that I retrieved from api call. The JSON data format is like:
[
{
pageNo: 1
TotalRecordsCount: 8000,
Items: [
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
...
}
]
Edit data format:
Items: [{subject: ACCOUNTING, CAMPUS: CAMPUS A}, {subject: ACCOUNTING, campus: CAMPUS A}...]
PageNo: 1
TotalRecordCount: 8000
in JSON format.
How to access subject, campus, etc. data in ReactJS? I got the error message: Objects are not valid as a React child (found: object with keys {courseItem}).
App.js
import React, { Component } from 'react';
import axios from 'axios';
class App extends Component {
constructor() {
super();
this.state ={
courses:
};
}
componentDidMount(){
axios.get('myURL')
.then(response=>{
this.setState({
courses:response.data
});
});
}
_getCourses(){
const data=this.state.courses;
const courseItem=data.map((course,index)=>(
<div>
Page No: course.ageNo <br />
<div className="courseItem"><ul>
Course: <li>ID:{course.id}
SUBJECT:{course.subject}
CAMPUS: {course.campus} </li>
</ul></div>
</div>
));
render() {
const courses= this._getCourses();
return (
<div className="App">
<div className="courseResults">
{courses}
</div>
</div>
);
}
}
export default App;
Thanks.
reactjs
I have problem to display nested array data that I retrieved from api call. The JSON data format is like:
[
{
pageNo: 1
TotalRecordsCount: 8000,
Items: [
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
...
}
]
Edit data format:
Items: [{subject: ACCOUNTING, CAMPUS: CAMPUS A}, {subject: ACCOUNTING, campus: CAMPUS A}...]
PageNo: 1
TotalRecordCount: 8000
in JSON format.
How to access subject, campus, etc. data in ReactJS? I got the error message: Objects are not valid as a React child (found: object with keys {courseItem}).
App.js
import React, { Component } from 'react';
import axios from 'axios';
class App extends Component {
constructor() {
super();
this.state ={
courses:
};
}
componentDidMount(){
axios.get('myURL')
.then(response=>{
this.setState({
courses:response.data
});
});
}
_getCourses(){
const data=this.state.courses;
const courseItem=data.map((course,index)=>(
<div>
Page No: course.ageNo <br />
<div className="courseItem"><ul>
Course: <li>ID:{course.id}
SUBJECT:{course.subject}
CAMPUS: {course.campus} </li>
</ul></div>
</div>
));
render() {
const courses= this._getCourses();
return (
<div className="App">
<div className="courseResults">
{courses}
</div>
</div>
);
}
}
export default App;
Thanks.
reactjs
reactjs
edited Nov 15 '18 at 19:36
user788448
asked Nov 15 '18 at 17:56
user788448user788448
777
777
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
import React, { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
constructor() {
super();
this.state = {
courses: [
{
pageNo: 1,
TotalRecordsCount: 8000,
Items: [
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
}
]
}
]
}
}
_getCourses() {
const data = this.state.courses.slice(0);
const courseItem = data.map((course, index) => (
<div>
Page No: course.ageNo <br />
<div className="courseItem">
<ul>
{course.Items.map((details, index) => (
<React.Fragment>
<li>
Course: ID:{details.id}
</li>
<li>
SUBJECT:{details.subject}
</li>
<li>
CAMPUS: {details.campus}
</li>
</React.Fragment>))}
</ul>
</div>
</div>
))
return courseItem;
}
render() {
return (
<div className="App">
<div className="courseResults">
{this._getCourses()}
</div>
</div>
);
}
}
render(<App />, document.getElementById('root'));
https://stackblitz.com/edit/react-mnh5ex?embed=1&file=index.js
You needed to return courseItem in the _getCourse function. Otherwise it will not render any html when you call the _getCourse in the render function.
You also need to acess Items, because Items contains the data you want to access.
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
}
Thank you! I got error "TypeError: this.state.courses.slice is not a function" on line const data = this.state.courses.slice(0); The console log returns data array though.
– user788448
Nov 15 '18 at 18:43
Look at my example it runs on stackblitz. Just copy it into your editor, get it working with fake data before you use axios. My guess is the data you are storing in state is not an array thats why it does not let you slice.
– Omar
Nov 15 '18 at 18:48
The code works with the fake data array but not JSON data format returned from api call.
– user788448
Nov 15 '18 at 19:25
Okay give me the link to your api
– Omar
Nov 15 '18 at 19:26
Unfortunately the API link is password protected right now. I can only have the JSON data format here.
– user788448
Nov 15 '18 at 19:40
|
show 3 more comments
In
componentDidMount
you are currently setting courses to justresponse.data
. And this is the outer array from your response. The courses array is the inner array. So, you need to set courses toresponse.data[0].Items
. Perhaps you want to iterate overresponse.data
array as well if you expect more than one entry there.
componentDidMount() {
axios.get('http://localhost:8080')
.then(response => {
this.setState({
courses: response.data[0].Items
});
});
}
In
_getCourses
you need to return thecourseItems
variable:
_getCourses() {
const data = this.state.courses;
const courseItems = data.map((course, index) => (
<div>
Page No: course.ageNo <br />
<div className="courseItem"><ul>
Course: <li>ID:{course.id}
SUBJECT:{course.subject}
CAMPUS: {course.campus} </li>
</ul></div>
</div>
));
return courseItems;
}
You have the
render
function inside of the_getCourses
and it has to be on the same level, at the class level:
class App extends Component {
constructor() { ... }
componentDidMount() { ... }
_getCourses() { ... }
render() { ... }
}
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53325348%2fhow-to-display-nested-array-data-in-json-in-reactjs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
import React, { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
constructor() {
super();
this.state = {
courses: [
{
pageNo: 1,
TotalRecordsCount: 8000,
Items: [
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
}
]
}
]
}
}
_getCourses() {
const data = this.state.courses.slice(0);
const courseItem = data.map((course, index) => (
<div>
Page No: course.ageNo <br />
<div className="courseItem">
<ul>
{course.Items.map((details, index) => (
<React.Fragment>
<li>
Course: ID:{details.id}
</li>
<li>
SUBJECT:{details.subject}
</li>
<li>
CAMPUS: {details.campus}
</li>
</React.Fragment>))}
</ul>
</div>
</div>
))
return courseItem;
}
render() {
return (
<div className="App">
<div className="courseResults">
{this._getCourses()}
</div>
</div>
);
}
}
render(<App />, document.getElementById('root'));
https://stackblitz.com/edit/react-mnh5ex?embed=1&file=index.js
You needed to return courseItem in the _getCourse function. Otherwise it will not render any html when you call the _getCourse in the render function.
You also need to acess Items, because Items contains the data you want to access.
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
}
Thank you! I got error "TypeError: this.state.courses.slice is not a function" on line const data = this.state.courses.slice(0); The console log returns data array though.
– user788448
Nov 15 '18 at 18:43
Look at my example it runs on stackblitz. Just copy it into your editor, get it working with fake data before you use axios. My guess is the data you are storing in state is not an array thats why it does not let you slice.
– Omar
Nov 15 '18 at 18:48
The code works with the fake data array but not JSON data format returned from api call.
– user788448
Nov 15 '18 at 19:25
Okay give me the link to your api
– Omar
Nov 15 '18 at 19:26
Unfortunately the API link is password protected right now. I can only have the JSON data format here.
– user788448
Nov 15 '18 at 19:40
|
show 3 more comments
import React, { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
constructor() {
super();
this.state = {
courses: [
{
pageNo: 1,
TotalRecordsCount: 8000,
Items: [
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
}
]
}
]
}
}
_getCourses() {
const data = this.state.courses.slice(0);
const courseItem = data.map((course, index) => (
<div>
Page No: course.ageNo <br />
<div className="courseItem">
<ul>
{course.Items.map((details, index) => (
<React.Fragment>
<li>
Course: ID:{details.id}
</li>
<li>
SUBJECT:{details.subject}
</li>
<li>
CAMPUS: {details.campus}
</li>
</React.Fragment>))}
</ul>
</div>
</div>
))
return courseItem;
}
render() {
return (
<div className="App">
<div className="courseResults">
{this._getCourses()}
</div>
</div>
);
}
}
render(<App />, document.getElementById('root'));
https://stackblitz.com/edit/react-mnh5ex?embed=1&file=index.js
You needed to return courseItem in the _getCourse function. Otherwise it will not render any html when you call the _getCourse in the render function.
You also need to acess Items, because Items contains the data you want to access.
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
}
Thank you! I got error "TypeError: this.state.courses.slice is not a function" on line const data = this.state.courses.slice(0); The console log returns data array though.
– user788448
Nov 15 '18 at 18:43
Look at my example it runs on stackblitz. Just copy it into your editor, get it working with fake data before you use axios. My guess is the data you are storing in state is not an array thats why it does not let you slice.
– Omar
Nov 15 '18 at 18:48
The code works with the fake data array but not JSON data format returned from api call.
– user788448
Nov 15 '18 at 19:25
Okay give me the link to your api
– Omar
Nov 15 '18 at 19:26
Unfortunately the API link is password protected right now. I can only have the JSON data format here.
– user788448
Nov 15 '18 at 19:40
|
show 3 more comments
import React, { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
constructor() {
super();
this.state = {
courses: [
{
pageNo: 1,
TotalRecordsCount: 8000,
Items: [
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
}
]
}
]
}
}
_getCourses() {
const data = this.state.courses.slice(0);
const courseItem = data.map((course, index) => (
<div>
Page No: course.ageNo <br />
<div className="courseItem">
<ul>
{course.Items.map((details, index) => (
<React.Fragment>
<li>
Course: ID:{details.id}
</li>
<li>
SUBJECT:{details.subject}
</li>
<li>
CAMPUS: {details.campus}
</li>
</React.Fragment>))}
</ul>
</div>
</div>
))
return courseItem;
}
render() {
return (
<div className="App">
<div className="courseResults">
{this._getCourses()}
</div>
</div>
);
}
}
render(<App />, document.getElementById('root'));
https://stackblitz.com/edit/react-mnh5ex?embed=1&file=index.js
You needed to return courseItem in the _getCourse function. Otherwise it will not render any html when you call the _getCourse in the render function.
You also need to acess Items, because Items contains the data you want to access.
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
}
import React, { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
constructor() {
super();
this.state = {
courses: [
{
pageNo: 1,
TotalRecordsCount: 8000,
Items: [
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
}
]
}
]
}
}
_getCourses() {
const data = this.state.courses.slice(0);
const courseItem = data.map((course, index) => (
<div>
Page No: course.ageNo <br />
<div className="courseItem">
<ul>
{course.Items.map((details, index) => (
<React.Fragment>
<li>
Course: ID:{details.id}
</li>
<li>
SUBJECT:{details.subject}
</li>
<li>
CAMPUS: {details.campus}
</li>
</React.Fragment>))}
</ul>
</div>
</div>
))
return courseItem;
}
render() {
return (
<div className="App">
<div className="courseResults">
{this._getCourses()}
</div>
</div>
);
}
}
render(<App />, document.getElementById('root'));
https://stackblitz.com/edit/react-mnh5ex?embed=1&file=index.js
You needed to return courseItem in the _getCourse function. Otherwise it will not render any html when you call the _getCourse in the render function.
You also need to acess Items, because Items contains the data you want to access.
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
},
{
id: 1,
subject: "ACCOUNTING",
campus: "campus A"
}
edited Nov 15 '18 at 18:29
answered Nov 15 '18 at 18:22
OmarOmar
1,8851723
1,8851723
Thank you! I got error "TypeError: this.state.courses.slice is not a function" on line const data = this.state.courses.slice(0); The console log returns data array though.
– user788448
Nov 15 '18 at 18:43
Look at my example it runs on stackblitz. Just copy it into your editor, get it working with fake data before you use axios. My guess is the data you are storing in state is not an array thats why it does not let you slice.
– Omar
Nov 15 '18 at 18:48
The code works with the fake data array but not JSON data format returned from api call.
– user788448
Nov 15 '18 at 19:25
Okay give me the link to your api
– Omar
Nov 15 '18 at 19:26
Unfortunately the API link is password protected right now. I can only have the JSON data format here.
– user788448
Nov 15 '18 at 19:40
|
show 3 more comments
Thank you! I got error "TypeError: this.state.courses.slice is not a function" on line const data = this.state.courses.slice(0); The console log returns data array though.
– user788448
Nov 15 '18 at 18:43
Look at my example it runs on stackblitz. Just copy it into your editor, get it working with fake data before you use axios. My guess is the data you are storing in state is not an array thats why it does not let you slice.
– Omar
Nov 15 '18 at 18:48
The code works with the fake data array but not JSON data format returned from api call.
– user788448
Nov 15 '18 at 19:25
Okay give me the link to your api
– Omar
Nov 15 '18 at 19:26
Unfortunately the API link is password protected right now. I can only have the JSON data format here.
– user788448
Nov 15 '18 at 19:40
Thank you! I got error "TypeError: this.state.courses.slice is not a function" on line const data = this.state.courses.slice(0); The console log returns data array though.
– user788448
Nov 15 '18 at 18:43
Thank you! I got error "TypeError: this.state.courses.slice is not a function" on line const data = this.state.courses.slice(0); The console log returns data array though.
– user788448
Nov 15 '18 at 18:43
Look at my example it runs on stackblitz. Just copy it into your editor, get it working with fake data before you use axios. My guess is the data you are storing in state is not an array thats why it does not let you slice.
– Omar
Nov 15 '18 at 18:48
Look at my example it runs on stackblitz. Just copy it into your editor, get it working with fake data before you use axios. My guess is the data you are storing in state is not an array thats why it does not let you slice.
– Omar
Nov 15 '18 at 18:48
The code works with the fake data array but not JSON data format returned from api call.
– user788448
Nov 15 '18 at 19:25
The code works with the fake data array but not JSON data format returned from api call.
– user788448
Nov 15 '18 at 19:25
Okay give me the link to your api
– Omar
Nov 15 '18 at 19:26
Okay give me the link to your api
– Omar
Nov 15 '18 at 19:26
Unfortunately the API link is password protected right now. I can only have the JSON data format here.
– user788448
Nov 15 '18 at 19:40
Unfortunately the API link is password protected right now. I can only have the JSON data format here.
– user788448
Nov 15 '18 at 19:40
|
show 3 more comments
In
componentDidMount
you are currently setting courses to justresponse.data
. And this is the outer array from your response. The courses array is the inner array. So, you need to set courses toresponse.data[0].Items
. Perhaps you want to iterate overresponse.data
array as well if you expect more than one entry there.
componentDidMount() {
axios.get('http://localhost:8080')
.then(response => {
this.setState({
courses: response.data[0].Items
});
});
}
In
_getCourses
you need to return thecourseItems
variable:
_getCourses() {
const data = this.state.courses;
const courseItems = data.map((course, index) => (
<div>
Page No: course.ageNo <br />
<div className="courseItem"><ul>
Course: <li>ID:{course.id}
SUBJECT:{course.subject}
CAMPUS: {course.campus} </li>
</ul></div>
</div>
));
return courseItems;
}
You have the
render
function inside of the_getCourses
and it has to be on the same level, at the class level:
class App extends Component {
constructor() { ... }
componentDidMount() { ... }
_getCourses() { ... }
render() { ... }
}
add a comment |
In
componentDidMount
you are currently setting courses to justresponse.data
. And this is the outer array from your response. The courses array is the inner array. So, you need to set courses toresponse.data[0].Items
. Perhaps you want to iterate overresponse.data
array as well if you expect more than one entry there.
componentDidMount() {
axios.get('http://localhost:8080')
.then(response => {
this.setState({
courses: response.data[0].Items
});
});
}
In
_getCourses
you need to return thecourseItems
variable:
_getCourses() {
const data = this.state.courses;
const courseItems = data.map((course, index) => (
<div>
Page No: course.ageNo <br />
<div className="courseItem"><ul>
Course: <li>ID:{course.id}
SUBJECT:{course.subject}
CAMPUS: {course.campus} </li>
</ul></div>
</div>
));
return courseItems;
}
You have the
render
function inside of the_getCourses
and it has to be on the same level, at the class level:
class App extends Component {
constructor() { ... }
componentDidMount() { ... }
_getCourses() { ... }
render() { ... }
}
add a comment |
In
componentDidMount
you are currently setting courses to justresponse.data
. And this is the outer array from your response. The courses array is the inner array. So, you need to set courses toresponse.data[0].Items
. Perhaps you want to iterate overresponse.data
array as well if you expect more than one entry there.
componentDidMount() {
axios.get('http://localhost:8080')
.then(response => {
this.setState({
courses: response.data[0].Items
});
});
}
In
_getCourses
you need to return thecourseItems
variable:
_getCourses() {
const data = this.state.courses;
const courseItems = data.map((course, index) => (
<div>
Page No: course.ageNo <br />
<div className="courseItem"><ul>
Course: <li>ID:{course.id}
SUBJECT:{course.subject}
CAMPUS: {course.campus} </li>
</ul></div>
</div>
));
return courseItems;
}
You have the
render
function inside of the_getCourses
and it has to be on the same level, at the class level:
class App extends Component {
constructor() { ... }
componentDidMount() { ... }
_getCourses() { ... }
render() { ... }
}
In
componentDidMount
you are currently setting courses to justresponse.data
. And this is the outer array from your response. The courses array is the inner array. So, you need to set courses toresponse.data[0].Items
. Perhaps you want to iterate overresponse.data
array as well if you expect more than one entry there.
componentDidMount() {
axios.get('http://localhost:8080')
.then(response => {
this.setState({
courses: response.data[0].Items
});
});
}
In
_getCourses
you need to return thecourseItems
variable:
_getCourses() {
const data = this.state.courses;
const courseItems = data.map((course, index) => (
<div>
Page No: course.ageNo <br />
<div className="courseItem"><ul>
Course: <li>ID:{course.id}
SUBJECT:{course.subject}
CAMPUS: {course.campus} </li>
</ul></div>
</div>
));
return courseItems;
}
You have the
render
function inside of the_getCourses
and it has to be on the same level, at the class level:
class App extends Component {
constructor() { ... }
componentDidMount() { ... }
_getCourses() { ... }
render() { ... }
}
answered Nov 15 '18 at 18:37
ilonacodesilonacodes
445
445
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53325348%2fhow-to-display-nested-array-data-in-json-in-reactjs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown