Does the child component has access to parent component states in react?

Hello?

Is that true:
Does the child component has access to parent component states?

Should I do a specific job to make a component be a child of another component?

thanks,
Saeed

Not directly, no, that is what props is for. You pass values to components via props. This is the way React works: components don’t inherit anything automatically (so therefore you can put them wherever you want), they just use whatever parameters you give them as props. If they automatically inherited state from parents it would very quickly become impossible to manage the code.

Yeah, Dan is right.

You pass state down in props to the children and you pass a callback function if you want the child to be able to change the state of the parent. I once made a pen showing the concept.

Beyond that, there are things like context and state management tools like Redux that will help when this gets too onerous. But you should master the simplest task of passing the state around first.

I tried very hard to cope with the context and unfortunately no one helped :neutral_face:

Ah, I recognize the username now. I think you have asked some pretty difficult questions, some of which are beyond what you’re ready to understand. I think if you spend more times on fundamentals like this, you will make some progress and be able to write code with which we will be better able to help you.

But on that time I just couldn’t find out what should to send via context?
I tried manythings. But I dont think that was a hard question. I had no problem with context.

I have been involved in this issue ever since.

A feel like some smart people have volunteered their time to help you and answered several of your questions. This question in particular, I now notice, was already answered by me in a different thread, with that exact same pen.

I understand that you are struggling. It is my perception that many of the questions you have asked are about code that is beyond your grasp. I would advise to focus on fundamentals and go more slowly. Ask small, focussed, very specific questions.

This is a good example of a small, focussed, very specific question. Do Dan’s and my answer clear it up? That should be the focus of _this_thread.

But I live in a country that is severely sanctioned by the world and I do not have access to foreign currency and therefore foreign education. And I always use free tutorials.

HI @lingo1357 !

When I first started learning react a few months ago, I struggled too.

What helped me was to play around with some of the examples in the react documentation.

Then I would suggest doing some of the first couple of projects in the front end section.
Those will be good practice since they are small beginner projects.

Then you can try building a project outside of a class.

I building out my first full stack app using react for the front end.
At first I didn’t like react but now I love it. :grinning:

I just think you need more practice building stuff and the concepts will make more sense.

That’s what happened with me :grinning:

1 Like

Well, I’m sorry to hear that. I wasn’t asking for money for you to go to university. I was just asking for you to stay focussed on fundamentals, don’t get bogged down with things that are beyond your reach, and to ask focussed questions. (Again, this was a good one - you brought up other threads.) There is nothing wrong with learning from free tutorials - that’s basically how I learned. I’m just trying to give some suggestions on how to have better success with that path.

Thanks a lot.

I say this beacause I meant your point to Dan.

I’m loth to go through this again, but context is the same concept as what I’ve said regarding props. The only difference is that instead of passing those values down via props every time, you use a hook (useContext) to access the values.

So with props (assuming there is some state in the parent like { example: 1 }), you have to pass it down to the next component via props. And then from that one to the next one. And so on. Much of the time this is what you do in React, because much of the time you won’t be trying to pass something down through lots of components.

<Parent> // has some state: { example: 1 }
  <Child example={example}> // pass it via props
    <Child example={example}> // pass it via props
      <Child example={example}> // pass it via props
        <ChildThatUsesTheValue example={example} />
      </Child>
    </Child>
  </Child>
</ Parent>

Whereas with context, you still pass it down, but you don’t have to go down through the props, React handles that side of things and you can use useContext to access it:

<Parent.Provider value={{example: 1}}>
  <Child>
    <Child>
      <Child>
        <ChildThatUsesTheValue /> //  In this component, get the value from Parent.Provider using `useContext`
      </Child>
    </Child>
  </Child>
</ Parent.Provider>

Context is a way to make it easier to pass values all the way down through a deeply nested set of components.

If you don’t understand what I mean here (and you had a huge amount of trouble doing so the last time, as well as I think a basic misunderstanding of some JS concepts), you do need to brush up on, at a basic level, how you make a React app. And that information is fully available via free tutorials: there isn’t anything you would need to pay for

1 Like

Yes, Dan gives an excellent explanation. I just want to reiterate that if you are having trouble understanding how a React component shares information with its children, then you should probably learn and master that before moving on to things like context and Redux - they both solve a difficulty that you don’t even yet understand.

When we say that you should work on some fundamentals, we aren’t trying to be rude or discouraging - we are trying to help you. We think it will make you a stronger coder and make it easier to understand these more difficult concepts.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.