How to list all images from firebase in realtime into my reactjs web app?

Multi tool use
Multi tool use












1















constructor(props) {
super(props);



    this.state = {
arrayIMGS: arrayIMG,
news:

};

}


componentDidMount() {
var that = this



    firebase.database().ref('/IMAHE').on("child_added", function (dataNew) {
let newData = [...that.state.arrayIMGS]

newData.push(dataNew.val().createdAt, dataNew.val().url)
alert("DIDMOUNT: "+dataNew.val().url)
// alert(newData.values())

that.setState({ news: dataNew.val().url })
})
}


render() {



    var  data = [this.state.news]

return(
<div>
<div style={headStyle}>

<div style={perDivStyle}>


{data.map((e, idx) =>

<ListGroup>
<ListGroupItem key={idx}>
<Card>
<CardImg top width="50%" src={e} alt="Card image cap" />
<CardBody>
<CardTitle>Card Title</CardTitle>
<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
<CardText>
<small className="text-muted">Last updated 3 mins ago</small>
</CardText>
</CardBody>
</Card>
</ListGroupItem>
</ListGroup>



)}

</div>

<div style={footer}>

</div>
</div>
</div>
);
}


}



export default Feed;



I'm making a reactjs app that provides a user the ability to upload images to firebase. All the uploaded image is expected to show up in a list of cards. What should I do to do this?










share|improve this question

























  • provide code please

    – Omar
    Jan 1 at 5:52











  • I forgot @Omar sorry hehehe

    – Paul D. Dango
    Jan 1 at 6:19











  • call firebase and get new image once its uploaded.

    – Just code
    Jan 1 at 6:28











  • this is my code for getting image url in firebase, the problem is that I only manage to render one image, but when I put it in alert() it fetched all the url of my images

    – Paul D. Dango
    Jan 1 at 6:31
















1















constructor(props) {
super(props);



    this.state = {
arrayIMGS: arrayIMG,
news:

};

}


componentDidMount() {
var that = this



    firebase.database().ref('/IMAHE').on("child_added", function (dataNew) {
let newData = [...that.state.arrayIMGS]

newData.push(dataNew.val().createdAt, dataNew.val().url)
alert("DIDMOUNT: "+dataNew.val().url)
// alert(newData.values())

that.setState({ news: dataNew.val().url })
})
}


render() {



    var  data = [this.state.news]

return(
<div>
<div style={headStyle}>

<div style={perDivStyle}>


{data.map((e, idx) =>

<ListGroup>
<ListGroupItem key={idx}>
<Card>
<CardImg top width="50%" src={e} alt="Card image cap" />
<CardBody>
<CardTitle>Card Title</CardTitle>
<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
<CardText>
<small className="text-muted">Last updated 3 mins ago</small>
</CardText>
</CardBody>
</Card>
</ListGroupItem>
</ListGroup>



)}

</div>

<div style={footer}>

</div>
</div>
</div>
);
}


}



export default Feed;



I'm making a reactjs app that provides a user the ability to upload images to firebase. All the uploaded image is expected to show up in a list of cards. What should I do to do this?










share|improve this question

























  • provide code please

    – Omar
    Jan 1 at 5:52











  • I forgot @Omar sorry hehehe

    – Paul D. Dango
    Jan 1 at 6:19











  • call firebase and get new image once its uploaded.

    – Just code
    Jan 1 at 6:28











  • this is my code for getting image url in firebase, the problem is that I only manage to render one image, but when I put it in alert() it fetched all the url of my images

    – Paul D. Dango
    Jan 1 at 6:31














1












1








1








constructor(props) {
super(props);



    this.state = {
arrayIMGS: arrayIMG,
news:

};

}


componentDidMount() {
var that = this



    firebase.database().ref('/IMAHE').on("child_added", function (dataNew) {
let newData = [...that.state.arrayIMGS]

newData.push(dataNew.val().createdAt, dataNew.val().url)
alert("DIDMOUNT: "+dataNew.val().url)
// alert(newData.values())

that.setState({ news: dataNew.val().url })
})
}


render() {



    var  data = [this.state.news]

return(
<div>
<div style={headStyle}>

<div style={perDivStyle}>


{data.map((e, idx) =>

<ListGroup>
<ListGroupItem key={idx}>
<Card>
<CardImg top width="50%" src={e} alt="Card image cap" />
<CardBody>
<CardTitle>Card Title</CardTitle>
<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
<CardText>
<small className="text-muted">Last updated 3 mins ago</small>
</CardText>
</CardBody>
</Card>
</ListGroupItem>
</ListGroup>



)}

</div>

<div style={footer}>

</div>
</div>
</div>
);
}


}



export default Feed;



I'm making a reactjs app that provides a user the ability to upload images to firebase. All the uploaded image is expected to show up in a list of cards. What should I do to do this?










share|improve this question
















constructor(props) {
super(props);



    this.state = {
arrayIMGS: arrayIMG,
news:

};

}


componentDidMount() {
var that = this



    firebase.database().ref('/IMAHE').on("child_added", function (dataNew) {
let newData = [...that.state.arrayIMGS]

newData.push(dataNew.val().createdAt, dataNew.val().url)
alert("DIDMOUNT: "+dataNew.val().url)
// alert(newData.values())

that.setState({ news: dataNew.val().url })
})
}


render() {



    var  data = [this.state.news]

return(
<div>
<div style={headStyle}>

<div style={perDivStyle}>


{data.map((e, idx) =>

<ListGroup>
<ListGroupItem key={idx}>
<Card>
<CardImg top width="50%" src={e} alt="Card image cap" />
<CardBody>
<CardTitle>Card Title</CardTitle>
<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
<CardText>
<small className="text-muted">Last updated 3 mins ago</small>
</CardText>
</CardBody>
</Card>
</ListGroupItem>
</ListGroup>



)}

</div>

<div style={footer}>

</div>
</div>
</div>
);
}


}



export default Feed;



I'm making a reactjs app that provides a user the ability to upload images to firebase. All the uploaded image is expected to show up in a list of cards. What should I do to do this?







reactjs firebase






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 1 at 6:19







Paul D. Dango

















asked Jan 1 at 4:45









Paul D. DangoPaul D. Dango

85




85













  • provide code please

    – Omar
    Jan 1 at 5:52











  • I forgot @Omar sorry hehehe

    – Paul D. Dango
    Jan 1 at 6:19











  • call firebase and get new image once its uploaded.

    – Just code
    Jan 1 at 6:28











  • this is my code for getting image url in firebase, the problem is that I only manage to render one image, but when I put it in alert() it fetched all the url of my images

    – Paul D. Dango
    Jan 1 at 6:31



















  • provide code please

    – Omar
    Jan 1 at 5:52











  • I forgot @Omar sorry hehehe

    – Paul D. Dango
    Jan 1 at 6:19











  • call firebase and get new image once its uploaded.

    – Just code
    Jan 1 at 6:28











  • this is my code for getting image url in firebase, the problem is that I only manage to render one image, but when I put it in alert() it fetched all the url of my images

    – Paul D. Dango
    Jan 1 at 6:31

















provide code please

– Omar
Jan 1 at 5:52





provide code please

– Omar
Jan 1 at 5:52













I forgot @Omar sorry hehehe

– Paul D. Dango
Jan 1 at 6:19





I forgot @Omar sorry hehehe

– Paul D. Dango
Jan 1 at 6:19













call firebase and get new image once its uploaded.

– Just code
Jan 1 at 6:28





call firebase and get new image once its uploaded.

– Just code
Jan 1 at 6:28













this is my code for getting image url in firebase, the problem is that I only manage to render one image, but when I put it in alert() it fetched all the url of my images

– Paul D. Dango
Jan 1 at 6:31





this is my code for getting image url in firebase, the problem is that I only manage to render one image, but when I put it in alert() it fetched all the url of my images

– Paul D. Dango
Jan 1 at 6:31












0






active

oldest

votes











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
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53993059%2fhow-to-list-all-images-from-firebase-in-realtime-into-my-reactjs-web-app%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























0






active

oldest

votes








0






active

oldest

votes









active

oldest

votes






active

oldest

votes
















draft saved

draft discarded




















































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.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53993059%2fhow-to-list-all-images-from-firebase-in-realtime-into-my-reactjs-web-app%23new-answer', 'question_page');
}
);

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







kgzj xngQu vYkqh00 FZqb7hyF,1KgRkq1XQxZi,sY,eUQMxklUQij 9 3n1x3Es0EYB7wKmVI,XJOOtCJ Mu R6br9
TF,YdqXipGc6GqxbKL

Popular posts from this blog

Monofisismo

Angular Downloading a file using contenturl with Basic Authentication

Olmecas