Very simply I have an HTML structure like this:
<div id="App" class="ui container">
<div id="Keywords" class="left"></div>
<div id="Users" class="right"></div>
<div class="clear"></div>
<div id="Nav"></div>
</div>
And I am appending my components like this:
ReactDom.render(<Feed listenTo="keywords" />, document.querySelector('#Keywords'));
ReactDom.render(<Feed listenTo="users" />, document.querySelector('#Users'));
ReactDom.render(<Nav />, document.querySelector('#Nav'));
I want to get rid of the #Keywords and #Users divs. I just want my components to append to the #App div. I tried something like this:
ReactDom.render(<Feed listenTo="keywords" />, document.querySelector('#App'));
ReactDom.render(<Feed listenTo="users" />, document.querySelector('#App'));
ReactDom.render(<Nav />, document.querySelector('#Nav'));
And I ended up getting this error:
Uncaught Error: Invariant Violation: _registerComponent(...): Target
container is not a DOM element.
Anyone have an idea of how I can just append those two components into the #App div? Do I have to make #App a parent component?
Thanks in advance!
You could do something like this:
let Main = React.createClass({
render: function() {
return <div className="container main">
<Feed listenTo="users" />
<Feed listenTo="keywords" />
<Nav />
</div>;
}
});
React.render(
<Main />,
document.getElementById('app')
);
I have included this fiddle.
It uses the depricated React.render instead of ReactDOM.render - but it seems to work.
Related
I can not figure it out that how is it possible to use HTML in a data attribute inside React's jsx.
Like
data-bs-template='<div class="tooltip d-none d-md-block" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
Is this approach right or wrong?
In order set HTML in a React component, you need to create an object that has the __html property and the a string that contains the relevant HTML markup. Like this:
{__html: '<span>Something</span>'};
And finally render it using dangerouslySetInnerHTML which is React's replacement for the native innerHTML:
function Tooltip(props) {
const someHTML = {
__html: `<div class="tooltip d-none d-md-block" role="tooltip"><div class="arrow"></div><div class="tooltip-inner">${props.text}</div></div>`
};
return <div dangerouslySetInnerHTML={someHTML}></div>;
}
function App() {
return (
<div className="container">
<Tooltip text="Hello this is a tooltip" />
</div>
);
}
ReactDOM.render( < App / > , document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
You just pass attribute like this:
data-bs-template={
"<div class="tooltip d-none d-md-block" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner"></div>
</div>"
}
Updated Code
There is your answer:
const App = () => {
const data = '<b>lorem ipsum</b>';
return (
<div
dangerouslySetInnerHTML={{__html: data}}
/>
);
}
export default App;
Say I have a child class extends from parent class.
Parent class renders
<div id="container" class="style-scope ">
.....
bunch of DOM.
</div>
In child classes, how could I render a HTML DOM like any of below examples without copy paste?
<div id="container" class="style-scope ">
.....
bunch of DOM.
<div id="childContainer">
</div>
</div>
<div id="container" class="style-scope ">
.....
bunch of DOM.
</div>
<div id="childContainer">
</div>
Have the parent render it’s children.
render () {
return (
<>
<div id="container" className="style-scope ">
.....
bunch of DOM.
</div>
{ this.props.children }
</>
)
}
Then you can do:
<Parent>
<div id=“childContainer”>...</div>
</Parent>
To get:
<div id="container" class="style-scope ">
.....
bunch of DOM.
</div>
<div id=“childContainer”>...</div>
I'm having trouble "appending" a child component (NewPageSidear) to a specific ID higher up and outside (Main) the parent component (NewPage) that is loading the child component.
I have the following DOM structure that is created in Main.jsx, which is loaded on page load to index.html:
render(){
return(
<div id="wrapper" className="wrapper">
<Header />
<div id="content" className="content">
<Sidebar />
<div id="main" className="main">
<div className="section-title">
<h2>{this.state.pageTitle}</h2>
</div>
<div id="main-content" className="main-content"></div>
<Footer />
</div>
</div>
</div>
);
}
On page load, I do:
ReactDOM.render(<Dashboard/>,document.querySelector('#main-content'));
ON the Dashboard page, I'll click a button that will execute the following and replace the Dashboard with NewPage:
ReactDOM.render(<NewPage/>,document.querySelector('#main-content'));
My Problem is here:
When NewPage loads, there is a child component, NewPageSidebar that I want to append to #content. If I can get NewPageSidebar to append #content, then I can use componentWillUnmount to remove NewPageSidebar when unmounted. But how do I get NewPageSidebar appended to #content? Any help is very appreciated.
You can do something like:
ReactDOM.render(<NewPage newSidebar={true}/>,document.querySelector('#main-content'));
And in the NewPage:
render(){
return(
<div id="wrapper" className="wrapper">
<Header />
<div id="content" className="content">
<Sidebar />
{this.props.newSidebar ? <NewSidebar /> : null}
<div id="main" className="main">
<div className="section-title">
<h2>{this.state.pageTitle}</h2>
</div>
<div id="main-content" className="main-content"></div>
<Footer />
</div>
</div>
</div>
);
}
I want to have a style tag in my react js code of return()
return(
<style> .mobile_view_svg_div{}
`#media(max-width:600px){`
`.mobile_view_svg_div`
`{`
width:300px;
`}`
`} `
</style>
<div>
<svg className="mobile_view_svg_div">
svg code here.
<svg>
</div>
)
when I compile this , I get error as
Syntax error: Unexpected token, expected }
Any help would be great.
You forgot to add the wrapping div on it. With that, such styling should work.
I just added a red background so you can actually see the styling in action ;)
class App extends React.Component {
render() {
return (
<div>
<style>{`
.mobile_view_svg_div {
background-color: red;
}
#media(max-width:600px) {
.mobile_view_svg_div {
width:300px;
}
}
`}</style>
<div>
<svg className="mobile_view_svg_div">
svg code here.
</svg>
</div>
</div>
)
}
}
ReactDOM.render(
<App />,
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>
You need to wrap the return in div, works fine for me.
I'm having a weird issue using ReactJS, and React Router. I have my main App returning some basic HTML, which loads on the page fine:
App.routes = (
<Router.Route name="app" path="/" handler={App.App}>
<Router.DefaultRoute handler={App.Matches} />
</Router.Route>
);
---
App.App = React.createClass({
render: function () {
return (
<div>
<App.NavBar />
<div className="ui page grid">
<div className="four wide column">
One
</div>
<div className="eight wide column">
Two
</div>
<div className="four wide column">
Three
</div>
</div>
<Router.RouteHandler/>
</div>
);
}
});
The NavBar component loads fine, along with the HTML. However, I expect the Router to now load the default handler App.Matches:
App.Matches = React.createClass({
render: function() {
return (
<div>
Content
</div>
);
}
});
As far as I can see, this should work. However, when rendered, I just get an empty script tag below the ` div like so:
<script data-reactid=".0.2"></script>
Anyone know why? Really confusing me.