Is there a better way to pass multiple props down to n children

You can use the spread operator like this :

<NavBar  {...this.state} />

It will pass you state properties as props to the navbar.

In you Navbar component, you can get the value of showSplash in state from props.showSplash

If you want to pass the data into a child component of Navbar, you can do something like this :

<ChildComponent {...props} /> // if Navbar is a functional component

<ChildComponent {...this.props} /> // if Navbar is a stateful component

Reference:

Spread in object literals

Here is a sample stackblitz for illustration.

If you want a data to be accessible by all the child components, then you have following options:

• React Context
• Redux or state management library like flux etc.

Or you could follow @Abdelkarim EL AMEL answer if that soughts out you issue for now.I would suggest take a look at the above mentioned options and if setting a global state which can be accessed anywhere in the app helps you to not send prop to each component explicitly. I would prefer to use a global state for variable which are common and needs to be accessed by all the child of the root app.

For example a button component to change the theme of the app. It changes the state of the root app and is accessible by every component.

I think this is actually entirely OK, and would recommend leaving it.

If you don't like seeing it itemized in the return of the render method you could keep them all in an object called navbarprops and just spread that in. I still prefer it as is though!