How to use Props in React

 

React props are a source of confusion for all new React users because they are never referenced in any other frameworks and are hardly ever explained on their own. After mastering React's JSX syntax, they are among the first React skills you will learn. Basically, data is passed from component to component in React by means of props. Through a series of detailed React props examples, I hope to clarify the concept of props in React in this article.

Example of REACT Component Props

When learning about React, you often start out with the JSX syntax for rendering things to the browser. In essence, JSX combines JavaScript with HTML to achieve the best of both worlds:

import * as React from 'react';

const App = () => {
  const greeting = 'Welcome to React';

  return (
    <div>
      <h1>{greeting}</h1>
    </div>
  );
}

export default App;

import * as React from 'react';

const App = () => {
  return (
    <div>
      <Welcome />
    </div>
  );
};

const Welcome = () => {
  const greeting = 'Welcome to React';

  return <h1>{greeting}</h1>;
};

export default App;

How to send the data from one React component to another component is a common question that comes after this refactoring. After all, rather than the static greeting that is predefined within the new component, the new component should render a dynamic greeting. After all, it ought to operate as a function to which I can send arguments.

Entering custom HTML attributes to which you assign your data using the JSX syntax for React props, where you can transmit data from one React component to another:

import * as React from 'react';

const App = () => {
  const greeting = 'Welcome to React';

  return (
    <div>
      <Welcome text={greeting} />
    </div>
  );
};

const Welcome = (props) => {
  return <h1>{props.text}</h1>;
};

export default App;

Since the JavaScript object holding all the data transferred from component to component is always found as the first parameter in the function signature of a function component, you can destructure the props early. It's known as React Props Destructuring.

import * as React from 'react';

const App = () => {
  const greeting = 'Welcome to React';

  return (
    <div>
      <Welcome text={greeting} />
    </div>
  );
};

const Welcome = ({ text }) => {
  return <h1>{text}</h1>;
};

export default App;

As you have seen, props enable you to pass values from one component to another component down the component tree. In the previous example, it was only a string variable. But props can be any JavaScript data type from integers over objects to arrays. Via props you can even pass React components as well, which you will learn about later.

For what it's worth, you can also define the props inline without declaring a variable before:

import * as React from 'react';

const App = () => {
  return (
    <div>
      <Welcome text={"Welcome to React"} />
    </div>
  );
};

const Welcome = ({ text }) => {
  return <h1>{text}</h1>;
};

export default App;

import * as React from 'react';

const App = () => {
  return (
    <div>
      <Welcome text="Welcome to React" />
    </div>
  );
};

const Welcome = ({ text }) => {
  return <h1>{text}</h1>;
};

export default App;

import * as React from 'react';

const App = () => {
  return (
    <div>
      <Welcome text={{ greeting: 'Welcome to React' }} />
    </div>
  );
};

const Welcome = ({ text }) => {
  return <h1>{text.greeting}</h1>;
};

export default App;

import * as React from 'react';

const App = () => {
  const greetingObject = { greeting: 'Welcome to React' };

  return (
    <div>
      <Welcome text={greetingObject} />
    </div>
  );
};

const Welcome = ({ text }) => {
  return <h1>{text.greeting}</h1>;
};

export default App;

import * as React from 'react';

const App = () => {
  return (
    <div>
      <Welcome text={{ greeting: 'Welcome to React' }} />
    </div>
  );
};

const Welcome = ({ text }) => {
  return <h1 style={{ color: 'red' }}>{text.greeting}</h1>;
};

export default App;