How does props program flow work in react js?

In summary, App.js exports a function object that returns a div, inside of which are calls to a Users function object. The Users function object takes one parameter, a list of name and job values, and returns an HTML div.
  • #1
shivajikobardan
674
54
TL;DR Summary
How does props program flow work in react js?
App.js:

JavaScript:
import React from 'react'
import Helloworld from './components/HelloWorld';
import Users from "./components/Users";

const App = () => {
  return (
    <div>
      <h1>List of Users</h1>
      <Users name="Zino Emi" job="Developer" />
      <Users name="Lionel Messi" job="Web Developer" />
      <Users name="Cristiano Ronaldo" job="Software Engineer" />

    </div>
  );
};export default App;

src/components/Users.js:

JavaScript:
import React from 'react'

const Users = (props) => {
  return (
    <div>
      <div className="user">
        <h2>Name: {props.name}</h2>
        <h3>Job:{props.job}</h3>
      </div>
    </div>
  )
}

export default Users

I'm not understanding the program flow here. What happens first then what? React is really confusing man.

Can anyone help me build a mental model of it?

Output:
BSZmoL48xmkMy0qH27SriEjV467SkN8PO1mEt_X2zIr70yNmmQ.png
 
Technology news on Phys.org
  • #2
1) Start with App.js
2) It returns Users component.
3) Inside Users component we pass properties name and job.
4) Inside Users.js we access it using props.name and props.job.
A figure that helped me

qEiARSBnn7sus-etImyqDuhXtZwY_S9NNjiv8l6O1aY2_cXS5w.png
 
  • #3
I'll take a shot at this, although it's been a long time since I've done anything in JavaScript and I don't know React.js at all.
shivajikobardan said:
1) Start with App.js
2) It returns Users component.
3) Inside Users component we pass properties name and job.
4) Inside Users.js we access it using props.name and props.job.
Your analysis looks more-or-less correct to me. What I would add is to describe App and Users as function objects, AKA lambdas.
The => notation in your code suggests to me that these are function objects.
Code:
const App = () => { <snip>

const Users = (props) => { <snip>
App.js imports a function object named Users, and defines a function object named App. The App function object takes no parameters and returns an HTML div.

Inside the div that is returned are calls to the Users function object. This function object takes one parameter, a list or tuple whose members are name and job. This function object also returns an HTML div. The HTML div that App returns lists Users three times, with each instance being a call to this function object, passing the relevant tuple/list in the call.
 

FAQ: How does props program flow work in react js?

How do props flow in React JS?

In React JS, props flow from parent components to child components. This means that the parent component passes down data or functions to its child components through props. The child components can then access and use the props in their own code.

What is the purpose of props in React JS?

Props, short for properties, are used to pass data between components in React JS. They allow parent components to communicate with their child components and share information such as state, functions, and other data.

How are props accessed in React JS?

Props can be accessed in React JS by using the 'props' keyword inside the child component. This allows the child component to access the props passed down from its parent component and use them in its own code.

Can props be modified in React JS?

In React JS, props are immutable, meaning they cannot be changed or modified by the child component. If the child component needs to make changes to the props, it must first pass the props back up to the parent component, where the state can be updated and the new props can be passed down again.

How can I pass props to a component in React JS?

Props can be passed to a component in React JS by adding them as attributes in the component's JSX tag. For example: <ChildComponent propName={propValue} />. The child component can then access the prop value using this.props.propName in its code.

Similar threads

Replies
1
Views
2K
Replies
2
Views
1K
Replies
8
Views
1K
Replies
10
Views
1K
Replies
16
Views
4K
Back
Top