Let’s look at calling a function in a parent component from a child component using React by creating a simple Photo Voting app
— Follow Me —
Twitter: https://www.twitter.com/codebubb
Facebook: https://www.facebook.com/juniordevelopercentral/
Blog: https://www.juniordevelopercentral.com/
— Thanks! —
React Project: Photo Voting App
-----------------------------------------------------------------------
00:00 Introduction
00:27 App Overview
02:54 Getting the Image Data
05:59 Creating the Image Components
12:33 Upvoting images
14:57 Updating the state after an upvote
17:28 Styling the app
20:45 Wrap-up
So in this web development tutorial, we’ll be walking through a React tutorial for Beginners by creating a basic React app, to demonstrate how to pass functions from a parent component down to a child component so that the function can be called from the child React component to trigger some kind of update in the parent React component.
We’ll be building a simple photo voting app that will populate some images in the app that users can then click on to ‘upvote’. This in turn will trigger a function in the main app component (the parent React component) to reload all of the data for the app and therefore update the state of the upvotes of each image component on the page.
This will all be done via a simple API that interfaces with an SQLite database that stores the results of the upvotes for everyone who visits the page.
So by the end of this React tutorial, you should have some ideas on how to construct parent and child React components and pass data and actions between them easily.
Any questions, just pop a comment below!
Thanks as always for watching
#javascript #react Channel Handle @codebubb
26 Comments