Passing Functions as Props


Passing Functions as Props

React Docs - lists and keys

  1. What does .map() return?

It returns a new array with a new values of manipulated inputs using a function inside the method.

  1. If I want to loop through an array and display each value in JSX, how do I do that in React?

First, we use the .map() method to render data then Parse and display data in an array of objects.

  1. Each list item needs a unique Key

  2. What is the purpose of a key?

Help React identify which items have changed, are added, or are removed.


The Spread Operator

  1. What is the spread operator?

The use of (โ€ฆ) three dots to transform objects into arguments.

  1. List 4 things that the spread operator can do.
  • Copying an array
  • Using Math functions
  • Adding an item to a list
  • Combining objects
  1. Give an example of using the spread operator to combine two arrays.

const hello = {hello: โ€œ๐Ÿ˜‹๐Ÿ˜›๐Ÿ˜œ๐Ÿคช๐Ÿ˜โ€}
const world = {world: โ€œ๐Ÿ™‚๐Ÿ™ƒ๐Ÿ˜‰๐Ÿ˜Š๐Ÿ˜‡๐Ÿฅฐ๐Ÿ˜๐Ÿคฉ!โ€}
const helloWorld = {โ€ฆhello,โ€ฆworld}

  1. Give an example of using the spread operator to add a new item to an array.

const fruits = [โ€˜๐Ÿโ€™,โ€™๐ŸŠโ€™,โ€™๐ŸŒโ€™,โ€™๐Ÿ‰โ€™,โ€™๐Ÿโ€™]
const moreFruits = [โ€ฆfruits];
fruits[0] = โ€˜๐Ÿ‘โ€™

  1. Give an example of using the spread operator to combine two objects into one.

const objectOne = {hello: โ€œ๐Ÿคชโ€}
const objectTwo = {world: โ€œ๐Ÿปโ€}
const objectThree = {โ€ฆobjectOne, โ€ฆobjectTwo, laugh: โ€œ๐Ÿ˜‚โ€}


How to Pass Functions Between Components

  1. In the video, what is the first step that the developer does to pass functions between components?

He set state outside to handle and pass the function to other components.

  1. In your own words, what does the increment function do?

It target the count value and update it every time you click on the button.

  1. How can you pass a method from a parent component into a child component?

Using props.

  1. How does the child component invoke a method that was passed to it from a parent component?

By passing it using a prop.

ย 

ย 

ย 


ย  ย 

Get back to EMAMโ€™S HOMEPAGE

I have created this page as a part of my project using Github, Please visit my profile, I will be more than happy to hear from you all. ย  ย  ย  ย ย ย ย ย ย ย ย ย ย ย ย ย ย ย  ยฉ Emam Shararah 2021