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

Props In ReactJS | ReactJS Tutorial #7

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!

Leave a Reply

What are PWAs? All About PWAs Can ChatGPT Beat Google? Can ChatGPT Replace Web Developer? Is Maths Important for Programming? Top 10 Programming Languages to Learn In 2023!