ReactJs (ES6) : Render component from a function

Question

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 .

Where is your state defined? i see your modal's appearance depends on this.state.showModal. Where do you define and update it ? — alioguzhan
– alioguzhan, Commented Aug 9, 2017 at 11:49
It is defined. My problem is modal is not displayed in the DOM structure when i see it in the console . — Vivek Iyer
– Vivek Iyer, Commented Aug 9, 2017 at 11:53
What happens if you render just some plain html inside renderManagerModal method? If it works, then it is something about your Modal Component, not Box Component. — alioguzhan
– alioguzhan, Commented Aug 9, 2017 at 11:57

Nocebo · Accepted Answer · 2017-08-09 11:57:22Z

1

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>
        )
    }

answered Aug 9, 2017 at 11:57

Nocebo

2,0973 gold badges18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sunpietro · Accepted Answer · 2017-08-09 12:02:16Z

0

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 () {}

answered Aug 9, 2017 at 12:02

sunpietro

2,0984 gold badges25 silver badges44 bronze badges

Comments

Dream_Cap · Accepted Answer · 2017-08-09 12:05:56Z

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>
        )

    }

Collectives™ on Stack Overflow

ReactJs (ES6) : Render component from a function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related