Add Props to Functional Component | ReactJS - part 4

 ← Building First Custom Component in React - part 3

All JavaScript functions accept an object argument, which in React is referred to as "props" or "property". The values can be passed into the component in the form of JavaScript expressions, string literals, variables, and objects.

When using React, data is transferred in a single flow from the parent component to the child component. Props in React are mostly used to pass custom data to your component.

You can't update props in react, props are immutable, which simply implies that we can't change them inside the component or we will get the error.

When passing data to a component in JSX, we use syntax similar to HTML-tag attribute and the component receives props as an object parameter.

<MyComponent title = "Welcome, Elpeeda" />

In the above example, it was passed as JSX-attribute. Now, inside the component, we must send the props keyword as an argument to the function and, for rendering, utilise dot notation inside curly braces in the return line with the attribute name you passed to the JSX.

function MyComponent = (props) => {
  return <h1>{props.title}</h1>
}

You can pass multiple props to your component as an object, for example - 

function App() {
   return <MyComponent title = "Welcome, Elpeeda" text = "This is react course" />
 }

function MyComponent = (props) => {
  return <div>
	  <h1>{props.title}</h1>
	  <p>{props.text}</p>
	</div>
}

By defining the component's props, you may really makes it reusable by changing the data for different components. Let's pass the various props to the ListComponent that we created in my component section.

<ListComponent course = "react" />
<ListComponent course = "HTML/CSS" />
<ListComponent course = "JavaScript" />

const ListComponent = (props) => {
   return <p>Learn {props.course}</p>
 }

We can pass variables and objects to the component by enclosing them in curly braces, just as we can pass any valid JavaScript expressions to the component as props using the JSX-attribute.

Let's make a variable called 'name' and pass it to the component.

const MyComponent = () => {
    cosnt name = "reactJS";
    
    return <ListComponent library={name} />
  }

Pass data from parent component to child component 

You may transfer data to other components in a variety of ways thanks to props. Always remember that data sent from the parent component, which holds the value, to the child component, and it cannot be updated by the child component; 

A parent component is any component that renders additional components. MyComponent is the parent component in this case, and each ListComponent is a child component, this is also known as a pure function.

If you're wondering why we don't define a variable or object on the same page and instead send it as a prop, the reason is that we could need to utilize the same information across many components. For example, I might need to use the name variable in both my App and MyComponent. If we're going to hard code this each time, it won't be reusable and won't follow the DRY pattern.

Props are helpful because they enable dynamic functionality without requiring you to rewrite the logic for every other component.

Assume we have a course variable in the App component with a list of arrays we want to send to the ListComponent.

function App() {
    const course = [
      {
        name: "Sandmus",
        language: "JavaScript",
        level: "Beginner"
      },
      {
       name: "Simba",
       language: "HTML/CSS",
       level: "Medium"
     },
     {
       name: "Jenny",
       language: "JavaScript",
       lever: "Advance"
     }
   ];
   
   return (
            <ListComponent name = {course[0].name} language = {courses[0].language} level = {courses[0].level} />
	    <ListComponent name = {course[1].name} language = {courses[0].language} level = {courses[0].level} />
	    <ListComponent name = {course[2].name} language = {courses[0].language} level = {courses[0].level} />
      )
 }

In the example above, we add attributes to these components and dynamically retrieve the stored value by assigning them in curly braces. The function component will receive data as an object parameter, which holds all the values we get on a custom component.

Since it is an array element, we may get the value by using the object names and retrieving the element by its number in square brackets, for example, course[0].name. So we can now output value on the screen by accessing, say, props.name. If your property doesn't match the attribute you provided on the component, it won't function for you.

As an alternative, you can also use curly braces to specify the object instead of using props keywords as arguments. You can use an attribute name to give parameters to a function component, but because it is an object, you must enclose it in curly braces,

for ex-

const ListComponent = ({name, language, level}) => {
    return (
    	<div>
    	  <h3>{name}</h3>
          <span>{language} : {level}</span>
        </div>
      )
  }

Conclusion 

Props is an abbreviation for properties. Props is an argument that is passed into a function component and an HTML attribute in JSX. It enables you to render a distinct element that is passed on to a different component by specifying a different name to render.