Props, Parent and Child Element + How to ask React Questions on this Forum

[phani-sekhar]

import "./Gallery.css";
function Profile(props) {

return (
<img
className="box"
style={{ borderRadius: "100%", width: "100%", height: "100%" }}
src={props.person.imgSource}
alt={props.person.description}
/>
);
}
// Profile is a component that is not exported.
// Gallery is a component that is exported and contains Profile components.
export default function Gallery() {

return (

<Profile
person={{
imgSource:
"https://www.gannett-cdn.com/presto/2019/10/02/USAT/33691565-57c4-4ce2-86d6-49ed5e9f87e2-AP_Big_Tech_Big_Oil.JPG",
description: "Tim Cook",
}}
/>
<Profile
person={{
imgSource:
"https://assets.entrepreneur.com/content/3x2/2000/1617286255-GettyImages-80145055.jpg?crop=1:1",
}}
/>
<Profile
person={{
imgSource:
"https://cdn.britannica.com/42/193142-050-F69B1A23/Sundar-Pichai-Google.jpg",
}}
/>
<Profile
person={{
imgSource:
"https://image.cnbcfm.com/api/v1/image/104410446-GettyImages-669889288.jpg?v=1529474846",
}}
/>
<Profile
person={{
imgSource:
"https://npr.brightspotcdn.com/dims4/default/932452a/2147483647/strip/true/crop/4626x3081+0+0/resize/880x586!/quality/90/?url=https%3A%2F%2Fmedia.npr.org%2Fassets%2Fimg%2F2023%2F01%2F12%2Fap23011863687114_custom-9043283387600dd08ca89471e5f78244ea8e31be.jpg",
}}
/>
<Profile
person={{
imgSource:
"https://cdn.britannica.com/70/118070-004-ACF4A6EC/Jeff-Bezos-2005.jpg",
}}
/>

</div>

);
}

[Jay-study-nildana]

@phani-sekhar

First thing first. If you are practicing react js, start using Code Sandbox.

https://www.youtube.com/watch?v=gANin2X_GnE

Second thing, put this code in a "code sandbox" project, and let me know.

Third Thing

So, the idea in react is, it uses what is called as 'JSX". The fundamental concept is to treat "UI" as if they are functions. That means, you pass

1. parameters
2. return values

React calls these parameters "props" for properties. Ultimately, they are nothing but variables that are passed. Returns values are nothing but VIEW things, like, what you are trying to show on the screen. which are ultimatley, DOM elements that are rendered by React.

Now, instead of thinking these components as parent and child, a simple way to understand them is to go back to "function basics".

1. Functions get called
2. Functions call other functions.

So, parent component is nothing but a function (calling function) that is calling the child (which is nothing but the called function).

The main issue here is, you are trying to learn React without knowing the basics of JavaScipt, lol :P Don't do that. I have seen lot of developers try to do this. Especially students.

I myself made this mistake.

So, my big advice is to

1. go back and spend more time with JavaScript.
2. Then, come back and do React JS.

And, finally, here is a simple example of props usage.

https://codesandbox.io/s/react-hello-world-31-01-23-sl4d2m?file=/src/components/PassingObjects.js

and also, you should spend more time studying this demo project that I created for React JS. It covers all basic concepts of beginner JS.

https://codesandbox.io/s/react-hello-world-31-01-23-sl4d2m

So, that is my long answer.

More questions, let me know (but YOU HAVE TO PUT YOUR REACT CODE IN CODESANDBOX for future questions. Otherwise, I cannot help, he he :P )

Jay.

[phani-sekhar]

Thank you for the explanation. Will follow the things

[Jay-study-nildana]

@phani-sekhar

Here is a nice example from one of your classmates (or one of your edureka students) on the best way to ask questions. check it out.

#25

Thanks

Jay.

[phani-sekhar]

Jay is expert in guiding the right things. After reading your answer thoroughly and checking some documentation of React has clarified my doubts. Now, with this knowledge i have made some experiment and created a carousal. With your loooong..... answer I have understood:

1. How to use SandBox first.
2. How to import data from a js file to a component in react
3. Using "useState" hook for interactive up gradation of data

And after a 1hr reading and getting hands dirty I'm successfully created a carousal with react. Even though it's a very small thing I can enjoy as its my first thing.
Lemme put the link here. Sorry I don't know where to post discussion. So I just commenting here. Next time, will learn new thing from you and put it in practice.

https://rg7fxl.csb.app/

(rendering taking some time dont know the reason for the latency)

Thank you so much Sir..!

[Jay-study-nildana]

@phani-sekhar

stop praising me so much, lol, he he :P but thank you for the kind words.

no issues, and happy to help.

As usual, when you get next doubt, just create a new Issue (if it is a coding problem) and new discussion (if its a theory general discussion).

Jay

[phani-sekhar]

Thank you see you soon ☺️