CODEWITHSUNDEEP
reactjs
Vivek Iyer
Vivek Iyer

Reputation: 163

ReactJs (ES6) : Render component from a function

My code

class Box extends Component {


    render () {

        return(
            <div className="box" style={styles.box}>
                <div className="img-container" style={styles}>
                    <img alt="Brand Logo" src={this.props.data.brand_logo} className="img-circle" id="brand_logo" width="50"/>
                </div>
                <ul className="box-basic-info-container">
                    <li>{basic_info_keys[0]} : {basic_info[basic_info_keys[0]]}</li>
                    <li>{basic_info[basic_info_keys[1]]}</li>
                </ul>
                {
                    iconEllipsis
                }
                <div className="box-other-info-container" >
                    <ul className="other_info" style={styles.contactInfo} >
                        {
                            other_info_keys.map(function(item,i){
                                return (<li key={i}>{item}: {other_info[item]}</li>)
                            })
                        }
                    </ul>
                </div>
                {this.renderManagerModal()}
            </div>
        )



    }
    renderManagerModal = () =>{
        return (
                <div>
                    <Modal show={this.state.showModal} onHide={this.close}>
                        <Modal.Header closeButton>
                            <Modal.Title>Managers</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                        </Modal.Body>
                        <Modal.Footer>
                            <Button onClick={this.close}>Close</Button>
                        </Modal.Footer>
                    </Modal>
                </div>
        )



    }
}

I am new to ES6 syntax. I have used this in ES5. But this is not working in ES6.

this.renderthisManagerModal is returning an empty div

Why is it so ? How to write a function that returns a component ? I dont want to import from different file. I want to write the component in the same file .

Upvotes: 0

Views: 68

Answers (3)

Dream_Cap
Dream_Cap

Reputation: 2302

I think a good approach would be to put renderManagerModal in a pure component like this:

  //assuming your props are coming from the Box component
  const RenderManagerModal = (props) => {
        return (
                <div>

                    <Modal show={props.showModal} onHide={props.close}>
                        <Modal.Header closeButton>
                            <Modal.Title>Managers</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                        </Modal.Body>
                        <Modal.Footer>
                            <Button onClick={props.close}>Close</Button>
                        </Modal.Footer>
                    </Modal>
                </div>
        )
    }

Then you would put that component inside the Box component like below:

class Box extends Component {

    showModal(){} 

    close{}

    render () {

        return(
            <div className="box" style={styles.box}>
                <div className="img-container" style={styles}>
                    <img alt="Brand Logo" src={this.props.data.brand_logo} className="img-circle" id="brand_logo" width="50"/>
                </div>
                <ul className="box-basic-info-container">
                    <li>{basic_info_keys[0]} : {basic_info[basic_info_keys[0]]}</li>
                    <li>{basic_info[basic_info_keys[1]]}</li>
                </ul>
                {
                    iconEllipsis
                }
                <div className="box-other-info-container" >
                    <ul className="other_info" style={styles.contactInfo} >
                        {
                            other_info_keys.map(function(item,i){
                                return (<li key={i}>{item}: {other_info[item]}</li>)
                            })
                        }
                    </ul>
                </div>
                <RenderManagerModal showModal={this.showModal} onHide={this.close}/>
            </div>
        )

    }

Upvotes: 0

sunpietro
sunpietro

Reputation: 2099

You are using arrow function when running renderManagerModal so the lexical this is the scope of the renderManagerModal, not the modal itself. To keep this you have to use "old" function declaration function () {}

Upvotes: 0

Nocebo
Nocebo

Reputation: 2017

You can do that, however I would encourage you to make use of the components in react. It's clean and you can make sure to have a separation of concerns.

I'd like to comment but my reputation is too low. Tell me, does this work?

 renderManagerModal = () => {
        return (
                <div>
                    Test
                </div>
        )
    }

Upvotes: 1

Related Questions