CODEWITHSUNDEEP
javascriptreactjsrender
tnoel999888
tnoel999888

Reputation: 654

React return within render

I'm making changes to an existing code base.
Below is a snippet of the code with details hidden: 

class Config extends Component {
  .
  .
  .
  render() {
    const { onSubmit, isConfigValid } = this.props;

    return (
      <Form>
        .
        .
        .
      </Form>
    );
  }
}

I need to change the <Form> component to a <Dialog> component and the implementation notes for this component give an example usage as:

render(
  <Dialog>
    .
    .
    .  
  </Dialog>, document.getElementById('root')
);

How do I incorporate this into the current format where there is a return within the render?
I have tried simply replacing the <Form> tags with <Dialog> tags but I don't know where to put the document.getElementById('root') and the Dialog box appears in the wrong position without this.

Any help appreciated!

Upvotes: 2

Views: 104

Answers (1)

devserkan
devserkan

Reputation: 17608

As you can see you use ReactDOM.render(...) where you want to render your top component into the DOM. Here, it is Config.

class Config extends React.Component {
  render() {
    return (
      //<Form>, Instead use <Dialog> here
      <Dialog>
        <h1>Hello</h1>
        <p>Foo</p>
      </Dialog>
      //</Form>
    );
  }
}

// Instead of using in the same file, probably you will import it:
// import Dialog from "./where_is_this_Dialog";
const Dialog = (props) => (
  <div>{props.children}</div>
);

ReactDOM.render(
  <Config />,
  document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Upvotes: 3

Related Questions