Props in react – DEV Community

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

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


Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

Prove your identity on demand and manage your finance with Flutter

Easiest Way to Send Emails With JavaScript by SilvenLEAF