Skip to content
Home » Blogs » Props In ReactJS | ReactJS Tutorial #7

Props In ReactJS | ReactJS Tutorial #72 min read

Props In ReactJS | ReactJS Tutorial #7

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!

Tanmay Sinha
Latest posts by Tanmay Sinha (see all)

Related posts:

ES6 In ReactJSES6 In ReactJS | ReactJS Tutorial #33 min read Getting Started With ReactJS | ReactJS Tutorial #1Getting Started With ReactJS | ReactJS Tutorial #11 min read Introduction to ReactJSIntroduction to ReactJS | ReactJS Tutorial #22 min read React Render HTMLReact Render HTML | ReactJS Tutorial #41 min read JSX In ReactJS | ReactJS Tutorial #5JSX In ReactJS | ReactJS Tutorial #51 min read Password ValidationPassword Validation Using JavaScript3 min read React vs AngularReact vs Angular | Which One You Should Go For?5 min read Top 10 Web Development ToolsTop 10 Web Development Tools | Every Web Developer Should Know2 min read
Tags:

Leave a Reply