CODEWITHSUNDEEP
javascriptreactjs
Jared Whipple
Jared Whipple

Reputation: 1171

Is it possible to replace DOM elements with React?

I would like to render a <section> element using React but only if certain conditions are met.

The problem is I can't nest the <section> within a <div> so the highest level DOM element besides <body> is <section>

My HTML:

<section id="my_element"></section>

My React:

ReactDOM.render(
  <div className="container">
    ...
  </div>,
  document.getElementById('my_element')
);

I know with Angular directives you can replace the original DOM element with your rendered element by using replace: true

app.directive('myElement', function(){
  return {
    replace: true,
    ...
    }
  };
});

Is something similar available in React?

Upvotes: 2

Views: 12731

Answers (2)

user120242
user120242

Reputation: 15268

Not currently implemented yet: https://github.com/facebook/react/issues/1311

Follow this issue to see development: https://github.com/facebook/react/issues/1711

StackOverflow question that has a workaround:
React.render replace container instead of inserting into
Workaround involves creating a temporary div, and then replacing the node.

Upvotes: 4

Errorpro
Errorpro

Reputation: 2423

You can use some case to da that. I prefer do this: 

render(){
return [<div>test</div>, <div>test2</div>]
}

this is answer on your question: https://github.com/facebook/react/issues/2127

Upvotes: 0

Related Questions