loading...

Functional component🔥 in React⛅️

dhirajkumarnayak profile image Dhiraj kumar Nayak ・1 min read

Components are basic building block of a react application. In react, there are two types of component functional component and class Component. Here we will discuss functional components.

Define a Functional Component

functional component that can be defined as a javascript function.
the props in the function going to contain the property we want to pass to the component.


function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Use of functional component.

you can define the function inside other components embedding the function name as a tag, like Welcome as <Welcome/>.

you can pass the property as an attribute of the component tag.


function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

Posted on by:

dhirajkumarnayak profile

Dhiraj kumar Nayak

@dhirajkumarnayak

Fullstack developer flutter, Angular, React, Ionic, firebase, Google cloud Platform.

Discussion

pic
Editor guide