# How does props program flow work in react js?

**URL:** <https://forum.kirupa.com/t/how-does-props-program-flow-work-in-react-js/655807>\
**Category:** web dev\
**Created:** [December 29, 2022, 7:53am UTC](https://forum.kirupa.com/t/how-does-props-program-flow-work-in-react-js/655807 "2022-12-29T07:53:10Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Post date:** [December 29, 2022, 7:53am UTC](https://forum.kirupa.com/t/how-does-props-program-flow-work-in-react-js/655807/1 "2022-12-29T07:53:10Z")

</div>

App.js:

```auto
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:

```auto
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:

 ![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/c/d/cd1b4c5b0a6ca6a413213659afe628618144f58b.png)

---

<div class="post-metadata">

**Author:** ![PAEz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/paez/32/19607_2.png) [@PAEz](https://forum.kirupa.com/u/PAEz)\
**Post date:** [December 29, 2022, 8:48am UTC](https://forum.kirupa.com/t/how-does-props-program-flow-work-in-react-js/655807/2 "2022-12-29T08:48:40Z")

</div>

I dont really know React as I dont use it, it confuses me to but later on, this stuff is still easy.  
The main thing you need to know is that “props” in a stateless component come from its parent component through the attributes.

Or, lets ask ChatGPT to have a go at explaining whats happening for you…

ME: If I have the following two files for a React app in javascript, could you explain the flow of operation here and tell me whats happening?  
[I wont include the two files to keep this short, you know whats in them. I only removed the HelloWorld bit because its not used]

Chat:  
The file `App.js` is the root component of your React app. It is responsible for rendering the main content of your app to the DOM (Document Object Model).

The `App` function is a React component that returns a JSX element. JSX is a syntax extension for JavaScript that allows you to write HTML-like code in your JavaScript files. The JSX element returned by the `App` component is a `div` element that contains an `h1` element and three instances of the `Users` component.

The `Users` component is a functional component that takes in two props: `name` and `job`. It is a stateless component, which means that it does not have its own state and only receives data from its parent component via props. The `Users` component returns a JSX element that displays the name and job of a user in a `div` element.

When the app is run, the `App` component will be rendered to the DOM and, in turn, render the `Users` components with the specified `name` and `job` props. This will result in the following HTML being rendered to the DOM:

```auto
<div>
  <h1>List of Users</h1>
  <div>
    <h2>Name: Zino Emi</h2>
    <h3>Job: Developer</h3>
  </div>
  <div>
    <h2>Name: Lionel Messi</h2>
    <h3>Job: Web Developer</h3>
  </div>
  <div>
    <h2>Name: Cristiano Ronaldo</h2>
    <h3>Job: Software Engineer</h3>
  </div>
</div>

```

This HTML will be displayed in the browser and the user will see a list of users with their names and jobs displayed.

ME:  
could you further explain the flow of data through attributes and props

CHAT:  
In a React app, components can pass data from one component to another through props. Props are short for “properties” and are a way for a component to receive data from its parent component.

In the example you provided, the `App` component is the parent component and the `Users` component is the child component. The `App` component passes data to the `Users` component through props.

Here’s how the flow of data works in this example:

1. The `App` component receives data (in this case, the names and jobs of the users) as variables or constants within the component.
2. The `App` component passes the data to the `Users` component through props. This is done by specifying the data as attributes in the JSX element for the `Users` component. For example: `<Users name="Zino Emi" job="Developer" />`
3. The `Users` component receives the data passed from the `App` component through props. Props are received by the component as an argument to the component function. In the case of the `Users` component, the props are received as an argument called `props`.
4. The `Users` component uses the data received through props to display the name and job of a user. It does this by using JSX expressions to access the values of the `name` and `job` props. For example: `{props.name}` and `{props.job}`.

So in this example, the data flows from the `App` component to the `Users` component through props. The `App` component is responsible for storing and managing the data, while the `Users` component is responsible for displaying the data to the user.