Getting some errors with axios in a react.js app

Question

Please someone tell me why am I getting this error from this app:

index.js:

const API='http://my-domain.com/api/?format=json'

class App extends React.Component{
	constructor(props){
		super(props);
		this.state={
			data: [],
			isLoading: false,
			error: null,
		};
	}
	
	componentDidMount(){
		this.setState({isLoading: true});
		axios.get(API)
			.then(response => this.setState({data: response.data, isLoading: false}))
			.catch(response => this.setState({error: response.error, isLoading: false}));
	}
	
	render(){
		return (
			<div>
			<p>{this.state.error}</p>
			<p>{this.state.isLoading ? 'Loading...':'Loaded'}</p>
			<ul>{this.state.data.map(obj => <li key={obj.id}>{obj}</li>)}</ul>
			</div>
		)
	}
}

<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>

This is the json that this app should get:

[{"id":5,"name":"Storey-1","Value":1399511075,"NSt":5},
{"id":6,"name":"Storey-2","Value":1344981250,"NSt":5},
{"id":7,"name":"Storey-3","Value":1363157800,"NSt":5}]

And this is the error I'm getting:

Objects are not valid as a React child (found: object with keys {id, name, Value, NSt}). If you meant to render a collection of children, use an array instead. in li (at index.js:29) in ul (at index.js:29) in div (at index.js:26) in App (at index.js:36)

What are you expecting this to output? <li key={obj.id}>{obj}</li> — StudioTime
– StudioTime, Commented Jul 17, 2018 at 21:00

Facundo Larrosa · Accepted Answer · 2018-07-17 21:01:54Z

1

Objects are not valid as a React child (found: object with keys {id, name, Value, NSt}). If you meant to render a collection of children, use an array instead. in li (at index.js:29) in ul (at index.js:29) in div (at index.js:26) in App (at index.js:36)

This is not an axios error. Is a React error thrown when trying to put a raw object as a React child component.

The error is in this line:

 <ul>{this.state.data.map(obj => <li key={obj.id}>{obj}</li>)}</ul>

Don't use the whole obj object, you must use an object field like this:

<ul>{this.state.data.map(obj => <li key={obj.id}>{obj.name}</li>)}</ul>

answered Jul 17, 2018 at 21:01

Facundo Larrosa

3,3892 gold badges16 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alserda · Accepted Answer · 2018-07-17 21:02:39Z

1

You're mapping through an array of objects in which you're trying to render the object itself:

<ul>{this.state.data.map(obj => <li key={obj.id}>{obj}</li>)}</ul>.

I assume you want to render {obj.name} or {obj.Value}?

answered Jul 17, 2018 at 21:02

Alserda

4,8041 gold badge19 silver badges25 bronze badges

Comments

Rodrigo Mata · Accepted Answer · 2018-07-17 21:05:11Z

0

The problem is that you are receiving an object in

<ul>{this.state.data.map(obj => <li key={obj.id}>{obj}</li>)}</ul>

with the {obj} so if you need the entire object, you can transform it to string with JSON.stringify like so (but I think it would be better to abstract this functionality into a separate function):

<li key={obj.id}>{JSON.stringify(obj)}</li>

answered Jul 17, 2018 at 21:05

Rodrigo Mata

1,8712 gold badges16 silver badges23 bronze badges

Comments

Davin Tryon · Accepted Answer · 2018-07-17 21:12:45Z

0

I think the error message is pretty clear. You are attempting to render on object and React doesn't like that:

<ul>{this.state.data.map(obj => <li key={obj.id}>{obj}</li>)}</ul>

As a next step, you might want to stringify and then pick out the properties you want rendered. Then, you can see what the response data is and decide how to render.

<ul>{this.state.data.map(obj => <li key={obj.id}>{JSON.stringify(obj)}</li>)}</ul>

edited Jul 17, 2018 at 21:12

answered Jul 17, 2018 at 21:01

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

5 Comments

StudioTime Over a year ago

That's a pretty loose answer, the question for the OP is what they want to render, not You might want to stringify

Davin Tryon Over a year ago

@DarrenSweeney thanks for the comment, but this is something I often do in order to figure out what I might want to render from the response. It is a logical next step. I'm not sure what is in the response data so I can't suggest anything better. If you have a better suggestion, that would be great.

StudioTime Over a year ago

My suggestion is this is not an answer - it's a comment really, I get what you mean, hence your answer almost mirrors my comment but to me, an answer with a question or doubt e.g. you might is just not a definitive answer imho

Davin Tryon Over a year ago

@DarrenSweeney Sorry, I couldn't tell if you were trolling :) - My answer to the OP about why is in my first sentance - because rendering an object is not allowed - as the error message says. Then rest is just trying to be helpful.

StudioTime Over a year ago

Ha ha I couldn't tell if you were trolling :) I don't even know what that means! I guess I'm behind on social media speak - it's no biggie mate, just wanted to voice what my thoughts are on what constitutes answers on here - 49k is a great rep, this was not a dig

Collectives™ on Stack Overflow

Getting some errors with axios in a react.js app

4 Answers 4

Comments

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related