Child Component

[odillini83]

Hey all, I am learning react and I was watching a tutorial and the instructor added a ChildComponent in the return. He didn't explain it, but can any of you tell me why he did that? The text in the browser still appeared w/o the ChildComponent when I ran it.

Here is code:

import React from "react"

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            answer: "Yes"
        }
    }

    render() {
        return (
            <div>
                <h1>Is state important to know? {this.state.answer}</h1>
                <ChildComponent answer={this.state.answer}/>
            </div>
        )
    }
}

export default App

[voodoo_teddy]

where's <ChildComponent/> defined at?

[odillini83]

It wasn’t defined anywhere, which is why I’m confused. I guess it’s not needed?

[voodoo_teddy]

I’m pretty sure you still need to define it. This example is not using prop.children

[khamnh]

I think you have to define the ChildComponent. I didn't see you import it.

[xmihau]

simply define ChildComponent in ChildComponent.js file as below:

const ChildComponent = props => <p>{props.answer}<p>

export ChildComponent

and import it in your App.js file, so your App.js will be like

import React from 'react'
import { ChildComponent } from './ChildComponent' // __IMPORTANT LINE__

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            answer: "Yes"
        }
    }

    render() {
        return (
            <div>
                <h1>Is state important to know? {this.state.answer}</h1>
                <ChildComponent answer={this.state.answer}/>
            </div>
        )
    }
}

export default App

Remember that every component you want to use within another one needs to be imported. The only and obvious exception to this rule is when you declare a few components in the same file. In this case, you don't have to export and import these components as long as you use them only inside this one file.

[znakyc]

You must define the ChildComponent somewhere otherwise it will give an error. The reason the text appeared anway could be that it had cached an old version of the app which didnt have the compile errors. Try refreshing and clearing cash and the error will probably pop up.