CODEWITHSUNDEEP
javascriptreactjsaxios
Gudarzi
Gudarzi

Reputation: 575

Getting some errors with axios in a react.js app

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)

Upvotes: 0

Views: 211

Answers (4)

Davin Tryon
Davin Tryon

Reputation: 67326

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>

Upvotes: 0

Rodrigo Mata
Rodrigo Mata

Reputation: 1859

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>

Upvotes: 0

Alserda
Alserda

Reputation: 4764

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

Upvotes: 1

Facundo Larrosa
Facundo Larrosa

Reputation: 3389

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>

Upvotes: 1

Related Questions