CODEWITHSUNDEEP
javascriptreactjs
vdusk
vdusk

Reputation: 13

ReactJS - Getting JSX to recognize a props value as an imported class

Hello and thank you for your time on this.

React & JS newbie here.

I am working with two bits of code:

index.js

import React, { Component } from 'react'; im
import ReactDOM from 'react-dom';
import './index.css';
import Modals from "./Modal";
import EditorComponent from './Editor';

ReactDOM.render(<Modals childComponent="<EditorComponent />" />, document.getElementById('root'));

Modal.js

import React, {Component} from 'react';
import EditorComponent from './Editor';
import { Modal } from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

 class Modals extends Component {


    render() {

        return (
            <div className="static-modal">
              <Modal.Dialog>
                <Modal.Header>
                  <Modal.Title>Journey onward...</Modal.Title>
                </Modal.Header>

                <Modal.Body>{this.props.childComponent}</Modal.Body>

                <Modal.Footer>
                  <Button>Close</Button>
                  <Button bsStyle="primary">Save changes</Button>
                </Modal.Footer>
              </Modal.Dialog>
            </div>
        );
    }
}

export default Modals;

Question

If I was to replace {this.props.childComponent} in Modal.js with <EditorComponent />, the class is successfully called. However when passed from index.js, as in the code above, the Modal is called successfully but with just "<EditorComponent />" in the body content as plain text.

I am unable to understand why this is happening. Thanks in advance for any help.

Upvotes: 1

Views: 53

Answers (2)

Ska
Ska

Reputation: 6888

Try this. You were passing EditorComponent as a string, not as an instance of EditorComponent component.

childComponent={<EditorComponent />}

Update

Option 2:

You don't need to pass EditorComponent as an instance, you can pass it by reference. I actually prefer this approach, but it depends on the situation.

index:

childComponent={EditorComponent}

modal:

const {EditorComponent } = this.props

<Modal.Body><EditorComponent /></Modal.Body>

Upvotes: 2

aravind_reddy
aravind_reddy

Reputation: 5476

you can use children instead of doing like this. What you are passing here is string so you are getting the plain text there. so you need to change a ReactDOM.render to this:

ReactDOM.render(<Modals><EditorComponent/></Modals>, document.getElementById('root'));

and change your modal.js to this:

    import React, {Component} from 'react';
import EditorComponent from './Editor';
import { Modal } from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

 class Modals extends Component {


    render() {

        return (
            <div className="static-modal">
              <Modal.Dialog>
                <Modal.Header>
                  <Modal.Title>Journey onward...</Modal.Title>
                </Modal.Header>

                <Modal.Body>{this.props.children}</Modal.Body>

                <Modal.Footer>
                  <Button>Close</Button>
                  <Button bsStyle="primary">Save changes</Button>
                </Modal.Footer>
              </Modal.Dialog>
            </div>
        );
    }
}

export default Modals;

or else just pass it as component instead of string:

ReactDOM.render(<Modals childComponent={<EditorComponent />} />, document.getElementById('root'));

Upvotes: 2

Related Questions