Kevin Powell - Community•4mo ago

props in react

Hello, I know that a props is just an argument that we passed in to components in reacts, but I don't know, I feel that I don't have a strong mental model of what props is, it's not clicking in my head, just wanted to know how anyone here would explain what a prop is and why is it useful

29 Replies

Ganesh•4mo ago

You'll have to explain it a bit more because react docs should've already told you that props are used to pass information to the react component What exactly are you confused about this

function NameTag({name}) {
  return <p>{name}</p>
}

function NameTag({name}) {
  return <p>{name}</p>
}

name is a prop. I can do this <NameTag name='Ganesh'/> And it'll display a paragraph with Ganesh as text content. Your just passing information to be used inside the component via props

StefanH•4mo ago

It's just a function argument You just pack all the args into a single object that's passed as a single arg. Why it's packed i don't know but it's probably just easier for react to handle

theoriginalandrew•4mo ago

^ this doesn't fully answer the question because you've destructuerd props. Essentially props is a short form way of passing in all arguments you require for a component. For example if you have a <Button> component that needs an onClick and text properties to be passed into them, then those are props - such as <Button onClick={() => {}} text="click me" />. The basic way that you get access to those custom properties are

const Button = (props) => <button onClick={props.onClick}>{props.text}</button>

const Button = (props) => <button onClick={props.onClick}>{props.text}</button>

in most cases, we prefer to destructure props (meaning that you extract the actual proprties out of props) to make it more specific, so in the above example, you go from

const Button = (props) => ...

const Button = (props) => ...

const Button = ({ onClick, text }) => ...

const Button = ({ onClick, text }) => ...

and you can also do

const Button => ({ onClick, ..rest}) => <button onClick={onClick} {...rest} />

const Button => ({ onClick, ..rest}) => <button onClick={onClick} {...rest} />

where you extract the property you want to modify and then spread the rest into the component elsewhere. Essentially props is just all properties of a component in one object

const { onClick, text } = props

const { onClick, text } = props

More on props: https://react.dev/learn/passing-props-to-a-component

Passing Props to a Component – React

The library for web and native user interfaces

Ganesh•4mo ago

react uses createElement under the hood i think and first argument of that is supposed to be an html element type or function/class component second is props object and third is children so it is probably for ease and so that react can map key val imagine having function (src, alt, ....) would become pretty unreadable

theoriginalandrew•4mo ago

ease and props don't really go together. just doing (props) can be highly error prone especially when you potentially have dozens of properties for a component.

Ganesh•4mo ago

I mean for the maintainers

theoriginalandrew•4mo ago

React documentation doesn't even recommend passing props in as the singular argument either anymore

StefanH•4mo ago

I think you can't really know the order of the arguments because js sucks and has no strong typing How would you know if name is arg 0 1 2...

theoriginalandrew•4mo ago

how would you know if it wasn't? Also, I know a few of the maintainers and they would agree with me that (props) is a bad pattern

Ganesh•4mo ago

I was specifically talking about the create element interface and why props itself is an object not that you should use props directly

StefanH•4mo ago

Yeah we're not saying you should do this. We're philosiphising why the library doesnt / can't work like that

theoriginalandrew•4mo ago

Most companies also shy away from allowing props alone into production unless its absolutely critically necessary, its just unnecessary to not destructure it straight away

StefanH•4mo ago

What's the danger?

theoriginalandrew•4mo ago

Its not really a "danger" its more of a code quality thing

StefanH•4mo ago

I can see that

theoriginalandrew•4mo ago

like props.children, props.onClick props.text props.['aria-label'] etc. is not clean - so essentially i'm saying - yes you can use props, but if you're concerened about the quality of the code you're writing and also wanting to work professionally (where quality is very important), then its better to destructure. Also there's learning benefits of destructuring, for instance handling cases of optional props or undefined props where you can't just do const { text } = props because text could be undefined, so you'd have to go further and do const { text } = props || {} to correctly do it or const { text = "test" } = props

Ganesh•4mo ago

also what do you mean by this? NameTag("Ganesh", "some badurl") the name will always be argument 0 and second argument will just be ignored. A strongly typed lang will throw an error I think because overload is not supported

theoriginalandrew•4mo ago

thats not what he meant

StefanH•4mo ago

Yeah then how do you translate <NameTag url={} avatar={} name={}/> to a function call with all args in the right place

theoriginalandrew•4mo ago

it doesn't actually matter what order you put things in for a react component as long as you pass in the right ones the only part that matters is that if you do {...rest} - if you put at the beginning of the component, then all subsequent props may overwrite it, and in typescript if you put it at the bottom of the list, you might get an error that that you're defining properties twice and may be overwritten

Ganesh•4mo ago

oh you mean in jsx syntax is there a way to do it in strongly typed languages tho?

StefanH•4mo ago

I feel like we're having 3 conversations lol Yeah in c# you can reflect on a function to get a list if its arguments and their names and types Can match the names that way and call it correctly. In js you dont know anything so you have ti create an object where all the props now have names you can map

Ganesh•4mo ago

ah okay. I wasn't aware of that. I only did enough c# to make a console calculator

theoriginalandrew•4mo ago

yeah definitely is a shortfall of "just" js

StefanH•4mo ago

Reflection is slow so you wouldnt wanna use it anyway

Kingpin•4mo ago

Ig you can describe them as destructured params from a normal function? Cuz react components are technically just js functions that return html.

Choo♚𝕂𝕚𝕟𝕘•4mo ago

Think of it as an argument passed in a function call, but the function call isn't written like a regular function call due to transpilation of JSX. Instead, the function is invoked via an element tag and the argument is passed via an attribute.

FakerOP•4mo ago

Yep I see, thanks for the explanations given, I have a better mental model now

curiousmissfox•4mo ago

I like to think of them like arguments to the function. Its like if you had a function in vanilla JS that you were passing data in.

function cardElement(cardTitle, cardID, cardBtnText) {
  return `
    <div class="card" data-id=${cardID}>
    <h2>${cardTitle}</h2>
    <button>${cardBtnText}</button>
</div>
 `
}

cardElement("AI Agents and Why You Shouldn't Bother", "CRD-101", "Read More About AI Agents")

function cardElement(cardTitle, cardID, cardBtnText) {
  return `
    <div class="card" data-id=${cardID}>
    <h2>${cardTitle}</h2>
    <button>${cardBtnText}</button>
</div>
 `
}

cardElement("AI Agents and Why You Shouldn't Bother", "CRD-101", "Read More About AI Agents")

So instead of passing in each variable we could make an object

const cardData = {
  cardTitle: "AI Agents and Why You Shouldn't Bother",
   cardID: "CRD-101",
    cardBtnText: "Read More About AI Agents"
}

function cardElement(cardObj) {
  return `
    <div class="card" data-id="${cardObj.cardID}">
      <h2>${cardObj.cardTitle}</h2>
      <button>${cardObj.cardBtnText}</button>
    </div>
  `;
}

cardElement(cardData);

const cardData = {
  cardTitle: "AI Agents and Why You Shouldn't Bother",
   cardID: "CRD-101",
    cardBtnText: "Read More About AI Agents"
}

function cardElement(cardObj) {
  return `
    <div class="card" data-id="${cardObj.cardID}">
      <h2>${cardObj.cardTitle}</h2>
      <button>${cardObj.cardBtnText}</button>
    </div>
  `;
}

cardElement(cardData);

props is just an object like cardObj ; they are passed in as an argument then the actual values are used in the parameters when invoking it. Thats a simplified way i think of it as theres more going on under the hood but its basically the way i learned (and looks like others in this thread are suggesting to think of it like an argument)

Gaming

Programming

props in react

Did you find this page helpful?