DEV Community

Lupita Rivera
Lupita Rivera

Posted on

Props in react

This short blog post will attempt to clearly summarize the concept of props in a way that the newest of programming students can understand.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”).
props(stands for properties)and return React elements describing what should appear on the screen.

Props can be strings, objects, arrays or functions

Image description

following the React Docs Props are Read-Only, immutable and the Component cannot change its own props.
They are also able to be passed between your components, generally from parent to child.

on the other hand you can pass props from CHILD component back up to the PARENT component. how you might ask ?

We have 2 components:
Parent: App.js
Child: Child.js

Use the following steps:
-Create a function inside your parent component, pass it a parameter and log that parameter using console.log .

-Pass the function name as props into your child component render.

-Invoke the function from props inside your child component.

-Pass in your data as an argument inside the invocation.

Parent Component

Image description

Child Component

Image description

Thanks for reading — I hope this provided some good value

Top comments (0)