Props In ReactJS | ReactJS Tutorial #72 min read

Hey Programmers, In this Post We Will Be Learning About Props In ReactJS, In the Previous Posts We Discussed Components In React, JSX, React Render HTML, ES6 & More. Here you Can Access All the React JS Tutorials Series.

React Tutorial Series

Props In ReactJS

Props are the React Arguments Passed Into the React Components. We Can Pass Props To Components By Using the HTML Attributes. Props In React are Similar Like Functions In JavaScript & Also Similar As Attributes In HTML. To Send Props In a Component, Use the Following Syntax.

const reactElement = <Programmer name="Mr Programmer" />;

Receiving the name Attribute Into a Component:

function name(props) {
return <h3>Tanmay is the Founder of {props.name} </h3>
}

Passing Data

Let’s See How you can Pass Data From One Component to Another As Parameters:

function name(props) {
  return <h3>Tanmay is the Founder of{ props.name}</h3>;
}

function Code() {
  return (
    <>
      <h1>Coding is Fun!</h1>
      <Programmer name="Mr Programmer" />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Code/>);

Sending Variable To a Component

If you have a Variable And Want to Send a Component Use the Following Syntax:

function name(props) {
  return <h3>Tanmay is the Founder of{ props.name}</h3>;
}

function Code() {
  const coderName = "Mr Programmer";
  return (
    <>
    <h1>Coding is Fun!</h1>
      <Coder Name={ coderName } />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Code/>);

Sending Object To a Component

function name(props) {
  return <h3>Tanmay is the Founder of{ props.name}</h3>;
}

function Code() {
  const coderName = { name: "Mr Programmer", model: "Programming With Tech!" };
  return (
    <>
     <h1>Coding is Fun!</h1>
      <Coder name={ coderName} />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Code/>);

So this was It For this Post, See You In the Next One Till Then Keep Coding Keep Exploring!

• Author
• Recent Posts

Tanmay Sinha

Founder & CEO at Mr Programmer

Founder & CEO of MrProgrammer.in | I help Learning Freaks to Step into the World of Programming and Our Mission is to Provide High Quality and Valuable Content to Our Users!

We believe that everyone has the potential to learn to code, and we are committed to making that happen. Our courses are designed to be engaging and interactive, and we offer a variety of learning paths to meet the needs of all learners.

We are also committed to providing our learners with the support they need to succeed, and we offer a variety of resources to help learners learn at their own pace.

If you are interested in learning to code, we encourage you to check out our courses. We are confident that you will find our content to be high-quality, valuable, and makes sense.

Latest posts by Tanmay Sinha (see all)

• The JS Developer’s Podcast [EP: 2] Variables and Data Manipulation - October 15, 2024
• YouTube Channels to Learn Coding: Top 9 Picks That Will Make a You Master - October 10, 2024
• The JS Developer’s Podcast [EP: 1] Introduction to JavaScript - September 27, 2024