DEV Community

Lupita Rivera
Lupita Rivera

Posted on

4 1

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

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay