Passing data to and from nested components in React

What are nested components in React?

In lesson 5, we created a simple component using classes in JavaScript, whereas, in lesson # 6 we learned to create a component using functions.

For the sake of review, let’s create two components using functions and classes.

Index.js

import React, {
    Component
} from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
    render() {
        return ( <div>
            <h2 > Class component </h2> 
                <p> Hello, {
                this.props.name
            } < /p> </div>
        )
    }
}
ReactDOM.render( < App name = "John" / > , document.getElementById('root'))

Now create another component using functions.

Index.js

import React, {
    Component
} from 'react'
import ReactDOM from 'react-dom'

function App(property) {
    return ( <div>
        <h2> Functional component </h2> 
            <p> Hello, {
            property.name
        } </p> 
        </div>
    )
}
ReactDOM.render( < App name = "John" / > , document.getElementById('root'))

The above function is considered a valid component in React. It is also accepting property and returns a JSX element. No matter how you define a component, props are read-only. If a function doesn’t change the input, it is called a pure function. These functions will always return the same result for the props being given.

For example, the following function is pure.

function App(a, b){
return a+b;
}

This can be converted into React component as:

import React, {
    Component
} from 'react'
import ReactDOM from 'react-dom'

function App(props) {
    return (props.a + props.b)
}
ReactDOM.render( < App a = {4} b = {5} />, document.getElementById('root'))

React recommends creating components using only pure functions.

React allows you to refer components in other components as JSX elements. This lets you use the same component multiple times. For example, you can create a button, an effect, a form and use it as many times you want.

For example, in the following piece of code, we have defined two components – <Hello/> and <App/>. The <Hello/> prints a string whereas the <App/> refers to the <Hello/> component three times with different values for props.

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

function Hello(props) {
    return ( <h2> {
            props.name
        }
        says, Hello < /h2>)
    }

    function App() {
        return ( <div>
            <Hello name = "John" / >
            <Hello name = "Sara" / >
            <Hello name = "Khan" / >
            </div>
        )
    }
    ReactDOM.render( < App / > , document.getElementById('root'))

Understand nested components

Let’s try to understand the concept of nested components with the help of one more example.

In this example, we will create two components – <Header/> and <Footer/> and refer these from another component <App/>

header.js

import React, { Component } from 'react'

function Header() {
    return ( <h2> This is header </h2>)
    }
    export default Header

footer.js

import React, { Component } from 'react'

function Footer() {
    return ( <h2>This is footer</h2>)
    }
    export default Footer

index.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Header from './header'
import Footer from './footer'

function App() {
    return ( <div>
        <Header/>
        <p>This is main content</p>
            <Footer/>
             </div>
    )

}
ReactDOM.render( < App / > , document.getElementById('root'))

index.html

<div id="root"></div>

The file structure for this example is:

I tried to keep this example as simple as possible. You can add some content, or give some style to see how it looks like. In case, you have any questions, please feel free to ask.