React return within render

Question

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!

Just return a Dialog component. The example is using the dialog as the root component to ReactDOM.render(…) — Andrew Li
– Andrew Li, Commented Aug 6, 2018 at 14:40
2nd render seems to be ReactDOM.render since that's where you specify the container to show the component. — dance2die
– dance2die, Commented Aug 6, 2018 at 14:42
You could just create a new Dialog component and return it whenever you need. — Dupocas
– Dupocas, Commented Aug 6, 2018 at 14:43
@Li357 but what about document.getElementById('root'), where does that go — tnoel999888
– tnoel999888, Commented Aug 6, 2018 at 14:44
@tnoel999888 The example is using ReactDOM.render. If you have a standalone component then you don't need it (provided that you actually render the component in the first place) — Andrew Li
– Andrew Li, Commented Aug 6, 2018 at 14:46

devserkan · Accepted Answer · 2018-08-06 14:50:35Z

3

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>

answered Aug 6, 2018 at 14:50

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

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

2 Comments

tnoel999888 Over a year ago

Thanks for the answer! However I'm getting a message "ESLint: 'children' is missing in props validation (react/prop-types)". I don't really understand the const Dialog = (props) => (... bit, I've already imported Dialog, do I still need this bit of code in that case?

devserkan Over a year ago

For prop types, it is a warning for the children I passed to Dialog component. I did this because you exampled this component like it waits some children. If you show us Dialog component we can make better suggestions. For the last question, of course you don't need the const Dialog ... part, I just mimicked your component here. You will import it then use it.

Collectives™ on Stack Overflow

React return within render

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related