Component rendering before ComponentDidMount and Axios sets the state
Ok so in the render method I pass the gifs state to my GifList component the problem is when I try to use that array in that component thru props its saying that its undefined and upon further review I can see that the gifs property in the app's state is originally being passed as an empty array before the setState is setting it to the return value of my Axios call in the lifecycle hook because of Axios being async. How can I fix this issue??
import React, { Component } from 'react';
import axios from "axios";
import styles from './App.css';
import Header from './Components/Header/Header';
import GifList from './Components/GifList/GifList';
class App extends Component {
state = {
title: "Giphy Search App",
gifs:
}
componentDidMount() {
axios.get("http://api.giphy.com/v1/gifs/search? q=funny+cat&limit=20&api_key=ms344CewNH5NEbybHwQifMZImoQfEQ38")
.then((res) => {
const arr = res.data.data;
this.setState({ gifs: arr });
});
}
render() {
return (
<div className={styles.app}>
<Header title={this.state.title}/>
<GifList gifList={this.state.gifs}/>
</div>
);
}
}
export default App;
javascript reactjs
add a comment |
Ok so in the render method I pass the gifs state to my GifList component the problem is when I try to use that array in that component thru props its saying that its undefined and upon further review I can see that the gifs property in the app's state is originally being passed as an empty array before the setState is setting it to the return value of my Axios call in the lifecycle hook because of Axios being async. How can I fix this issue??
import React, { Component } from 'react';
import axios from "axios";
import styles from './App.css';
import Header from './Components/Header/Header';
import GifList from './Components/GifList/GifList';
class App extends Component {
state = {
title: "Giphy Search App",
gifs:
}
componentDidMount() {
axios.get("http://api.giphy.com/v1/gifs/search? q=funny+cat&limit=20&api_key=ms344CewNH5NEbybHwQifMZImoQfEQ38")
.then((res) => {
const arr = res.data.data;
this.setState({ gifs: arr });
});
}
render() {
return (
<div className={styles.app}>
<Header title={this.state.title}/>
<GifList gifList={this.state.gifs}/>
</div>
);
}
}
export default App;
javascript reactjs
add a comment |
Ok so in the render method I pass the gifs state to my GifList component the problem is when I try to use that array in that component thru props its saying that its undefined and upon further review I can see that the gifs property in the app's state is originally being passed as an empty array before the setState is setting it to the return value of my Axios call in the lifecycle hook because of Axios being async. How can I fix this issue??
import React, { Component } from 'react';
import axios from "axios";
import styles from './App.css';
import Header from './Components/Header/Header';
import GifList from './Components/GifList/GifList';
class App extends Component {
state = {
title: "Giphy Search App",
gifs:
}
componentDidMount() {
axios.get("http://api.giphy.com/v1/gifs/search? q=funny+cat&limit=20&api_key=ms344CewNH5NEbybHwQifMZImoQfEQ38")
.then((res) => {
const arr = res.data.data;
this.setState({ gifs: arr });
});
}
render() {
return (
<div className={styles.app}>
<Header title={this.state.title}/>
<GifList gifList={this.state.gifs}/>
</div>
);
}
}
export default App;
javascript reactjs
Ok so in the render method I pass the gifs state to my GifList component the problem is when I try to use that array in that component thru props its saying that its undefined and upon further review I can see that the gifs property in the app's state is originally being passed as an empty array before the setState is setting it to the return value of my Axios call in the lifecycle hook because of Axios being async. How can I fix this issue??
import React, { Component } from 'react';
import axios from "axios";
import styles from './App.css';
import Header from './Components/Header/Header';
import GifList from './Components/GifList/GifList';
class App extends Component {
state = {
title: "Giphy Search App",
gifs:
}
componentDidMount() {
axios.get("http://api.giphy.com/v1/gifs/search? q=funny+cat&limit=20&api_key=ms344CewNH5NEbybHwQifMZImoQfEQ38")
.then((res) => {
const arr = res.data.data;
this.setState({ gifs: arr });
});
}
render() {
return (
<div className={styles.app}>
<Header title={this.state.title}/>
<GifList gifList={this.state.gifs}/>
</div>
);
}
}
export default App;
javascript reactjs
javascript reactjs
asked Nov 19 '18 at 4:17
user8322689
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
You can wait to render your GifList until your gifs array has something in them. This is basically an inline if statement for jsx.
render() {
return (
<div className={styles.app}>
<Header title={this.state.title}/>
{this.state.gifs.length > 0 && <GifList gifList={this.state.gifs}/>}
</div>
);
}
answered Nov 19 '18 at 4:20
dotconnordotconnor
1,072220
add a comment |
you can render GifList only after the list has some items
render() {
return (
<div className={styles.app}>
<Header title={this.state.title}/>
{
this.state.gifs.length &&
<GifList gifList={this.state.gifs}/>
}
</div>
);
}
export default App;
answered Nov 19 '18 at 4:20
hannad rehmanhannad rehman
1,5751627
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%2f53368239%2fcomponent-rendering-before-componentdidmount-and-axios-sets-the-state%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
You can wait to render your GifList until your gifs array has something in them. This is basically an inline if statement for jsx.
render() {
return (
<div className={styles.app}>
<Header title={this.state.title}/>
{this.state.gifs.length > 0 && <GifList gifList={this.state.gifs}/>}
</div>
);
}
answered Nov 19 '18 at 4:20
dotconnordotconnor
1,072220
add a comment |
You can wait to render your GifList until your gifs array has something in them. This is basically an inline if statement for jsx.
render() {
return (
<div className={styles.app}>
<Header title={this.state.title}/>
{this.state.gifs.length > 0 && <GifList gifList={this.state.gifs}/>}
</div>
);
}
answered Nov 19 '18 at 4:20
dotconnordotconnor
1,072220
add a comment |
You can wait to render your GifList until your gifs array has something in them. This is basically an inline if statement for jsx.
render() {
return (
<div className={styles.app}>
<Header title={this.state.title}/>
{this.state.gifs.length > 0 && <GifList gifList={this.state.gifs}/>}
</div>
);
}
answered Nov 19 '18 at 4:20
dotconnordotconnor
1,072220
You can wait to render your GifList until your gifs array has something in them. This is basically an inline if statement for jsx.
render() {
return (
<div className={styles.app}>
<Header title={this.state.title}/>
{this.state.gifs.length > 0 && <GifList gifList={this.state.gifs}/>}
</div>
);
}
answered Nov 19 '18 at 4:20
dotconnordotconnor
1,072220
answered Nov 19 '18 at 4:20
dotconnordotconnor
1,072220
answered Nov 19 '18 at 4:20
dotconnordotconnor
1,072220
answered Nov 19 '18 at 4:20
dotconnordotconnor
1,072220
1,072220
add a comment |
add a comment |
you can render GifList only after the list has some items
render() {
return (
<div className={styles.app}>
<Header title={this.state.title}/>
{
this.state.gifs.length &&
<GifList gifList={this.state.gifs}/>
}
</div>
);
}
export default App;
answered Nov 19 '18 at 4:20
hannad rehmanhannad rehman
1,5751627
add a comment |
you can render GifList only after the list has some items
render() {
return (
<div className={styles.app}>
<Header title={this.state.title}/>
{
this.state.gifs.length &&
<GifList gifList={this.state.gifs}/>
}
</div>
);
}
export default App;
answered Nov 19 '18 at 4:20
hannad rehmanhannad rehman
1,5751627
add a comment |
you can render GifList only after the list has some items
render() {
return (
<div className={styles.app}>
<Header title={this.state.title}/>
{
this.state.gifs.length &&
<GifList gifList={this.state.gifs}/>
}
</div>
);
}
export default App;
answered Nov 19 '18 at 4:20
hannad rehmanhannad rehman
1,5751627
you can render GifList only after the list has some items
render() {
return (
<div className={styles.app}>
<Header title={this.state.title}/>
{
this.state.gifs.length &&
<GifList gifList={this.state.gifs}/>
}
</div>
);
}
export default App;
answered Nov 19 '18 at 4:20
hannad rehmanhannad rehman
1,5751627
answered Nov 19 '18 at 4:20
hannad rehmanhannad rehman
1,5751627
answered Nov 19 '18 at 4:20
hannad rehmanhannad rehman
1,5751627
answered Nov 19 '18 at 4:20
hannad rehmanhannad rehman
1,5751627
1,5751627
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%2f53368239%2fcomponent-rendering-before-componentdidmount-and-axios-sets-the-state%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
