React Props and styling
Functions have arguments , component have Props
Last updated
Was this helpful?
Functions have arguments , component have Props
Last updated
Was this helpful?
Every React element has a props
object. For elements representing HTML tags, this is just an object containing .
Props stand for Properties. They are the read-only components which work similar to the HTML attributes. Prop is a way of passing data from parent to child component.
Think of props as arguments to a function. React components are functions which return JSX (or more generally something that's render-able like React elements, null
, a string, etc.). Typically, when you have a piece of code that you would like to reuse, you can place that code into a function and any dynamic values that code used before can be accepted as arguments (for example const result = 2 + 3
could be extracted to a function and accept arguments like so const result = add(2, 3)
).
As we already know, the react components arrange the UI in the form of a tree where the parent component becomes the root and child components become branches and sub-branches. Now suppose parent component wants to send data to one of its deeply nested components. Let us say from component 1 you need to send a property to component 6. How will you do that?
You cannot pass down a property directly to the target component. This is because React follows the rule where properties have to flow down from a parent component to an immediate child component. This means you canβt skip a layer of child components when sending a property and the child components canβt send property back up to a parent as well. You can have default props in case a parent component doesnβt pass down props so that they are still set. This is why React has one-way data binding.
For example, if you want to render this HTML using ReactDOM.render()
:
Then youβll need to pass in an element whose props
contain one entry for each of the <a>
tagβs attributes:
Simple, right? Thereβs just one problem:
Not all HTML attributes map directly to props.
Thereβs a few of these naming differences youβll come across rather frequently:
Instead of class
, you must use the className
prop to set CSS classes
Instead of a for
attribute on your <label>
elements, you must use a htmlFor
prop
Instead of passing a string for style
, you must use an object with camelCased names
Instead of tabindex
, youβll need to use a tabIndex
prop (note the capitalization)
Remembering these differences can be a bit of a pain. But unless youβre building rockets or medical devices, trial and error probably wonβt hurt. And as a bonus, memorizing these differences will help you even outside of the React ecosystem!
Styling a React element is as simple as passing in className
and/or style
props.
But which one should you use?
Actually, either is fine. There are times you canβt beat the convenience of adding a short style
prop, and there are times when youβll use className
to access the extra power provided by CSS.
If you want to use selectors, including pseudo-selectors like :hover
, then youβll need to use className
.
And in JSX
When creating React elements, your props
need to be named after DOM propertiesβββnot HTML attributes. If youβre familiar with the DOM, this shouldnβt be a problem. If not, check out the article .