Nested Components

Introduction

So far, we have used state variables that are managed by a component and props that are explicitly passed down into child components. These two ways to store and pass data normally work well for most situations. Sometimes we might need to pass a prop value down through multiple levels of components in order to get the data to the component that actually needs to use it. If our component tree is complex, this can make it difficult to keep track of where the data came from. This adds to the complexity of each component that is in between the source of the data and where it actually gets used, even if those intermediate components don’t use that piece of data themselves.