Functional Components
In this section, we will only talk about functional components as it is more prominent and widely used.
Functional Components:
**Functional Components are simply JavaScript functions that take **props as an argument and return a react element. We can create a functional component to React by writing a JavaScript function. These functions may or may not receive data as parameters. In the functional Components, the return value is the JSX code to render to the DOM tree. There is no render method used in functional components.
https://codesandbox.io/s/functional-components-3wlxjo?file=/src/components/PhotoEditor.js
In the above code, we have created a functional component named “Photo Editor” in which we are returning the img tag.
The output of the above is given below
PROPS
Props, which stands for properties, are arguments that are passed into the React Components
Now, in the above PhotoEditor component itself, we demonstrate the use of props.
In the above code snippet, the component PhotoEditor receives the property as the “props” **object. Now we use the name and type attribute in this component whose data has been provided to us by the **Parent Component App.
In the output below we see that the image that we had provided has been captioned with the name and the type properties.
Destructuring Props:
Destruction of Props simply means segregating and extracting or using the properties which we need.
In the following code, instead of writing props and associating with all the props we call only the specific properties that we want, in this case name and type. While doing this we do not have to write props.{property}, rather we can directly write the name of the attribute.
By doing this we would eliminate the repetition of using props every single time.
Top comments (0)