I am using React.js to build a web app that displays a table with a bunch of protocols that it receives using a REST api. Id like to replace ONLY the table.
inside the body of the index.html page i have this:
<div id= "content"><>/div>
when my jsx script renders the app it takes over the content div.
Is it possible to do the same thing but replace one of the react classes using the id?
var tableChange = function(url) {
React.render(
<myTable source={url}/>, document.getElementById("myOldTable")
);
}
where the original react app contains this:
<myTable id="myOldTable" source={this.props.url} />
When I run the code the following way it says that its a null element and it cant be found.
Related
Recently, I've been learning Gatsby.js & GraphQL and have been working on a small project. My goal with this project is to have simply one page that displays all posts on the page, meaning no slugs, etc referencing a specific page, just having all the markdown files converted to the template I have, then all on one page. An example of what I mean is below:
Looking through the Gatsby documentation, I can see how to make a list of markdown "blogs" but they're just links that you essentially click to take you to the actual post page which isn't what I want
I tried doing something similar to that, but my problem is I can't really pass the HTML to my component because it's made up of many UI components (Material UI card components). For example, I had something like this in my index.js file that displays all my posts
const Posts = edges
.filter(edge => !!edge.node.frontmatter.question)
.map(edge => <Grid item xs={8}><PostCard key={edge.node.id} question={edge.node.frontmatter.postTitle} postContents={}/></Grid>)
Obviously the problem there is, I can't pass dangerouslySetInnerHTML into postContents. I could pass edge.node.html but then the HTML tags themselves would be showing in the content. I know there's a better way to do this, which utilizes the template file in my templates folder but I'm not exactly sure how to, I had no luck finding much regarding this on stackoverflow or the Gatsby documentation.
Would appreciate any insight on how to achieve this result
Thanks!
If you cannot pass dangerouslySetInnerHTML into postContents, then you can instead pass the edge or node itself in, and then update that component to set the inner html of a div instead.
So your PostCard would look something like:
export default function PostCard({ node }) {
return (
<div key={node.id}>
<h1>{node.frontmatter.postTitle}</h1>
<div dangerouslySetInnerHTML={{ __html: node.html }} />
</div>
);
}
And your index.js could be simplified to:
const Posts = edges
.filter(edge => !!edge.node.frontmatter.question)
.map(edge => <Grid item xs={8}><PostCard node={edge.node} /></Grid>)
So I have two components (Preview component and an app component) in an angular project. I displayed one of the components (preview Component) inside the other(app component) through a relative path in an iframe:
app.component.html
<iframe
src="/pagepreview"
width="478"
height="926"
id="iframeId"
#previewFrame
>Alternative text
</iframe>
Now, In the app.component.ts file, I want to access the elements of the preview template, so I did this:
#ViewChild(`previewFrame`,{ static: true }) previewFrame: ElementRef;
onLoad() {
let frameEl: HTMLIFrameElement = this.previewFrame.nativeElement;
let showTemplate = frameEl.innerHTML
console.log(showTemplate )
}
The result I got was the Alternative text word inside the iframe tag.
Does anyone have an idea how I can get to access the HTML tags in the preview component page? I need to do this so I can do some DOM manipulation of the page preview component on the app component page. Thanks.
Apparently the page renders faster than the function that calls the DOM object, despite calling it inside an ngAfterViewInit life cycle hook. I added a setTimeout() function and now I'm able to get the DOM elements I want.
This answer provided the context to my solution.
I'm building a tester page where the user sees a library component and documents its use.
Here is the component:
render = () => {
let component = (
<Slider
onSlide={this.handleSlide}
totalCount={120}
/>
);
return (
<div>
<h2>Slider Test:</h2>
{component}
<code>HOW TO PRINT COMPONENT CODE HERE?</code>
</div>
);
};
I want to show the component in use and at the end the code I've used to test it.
How can I put on screen the component code without the need to replicate it inside the tag?
Is there a way to do it directly or though an existing npm library?
You could escape the code and it should appear correctly.
You can use that library to do it escape-html npm
You should also be able to find specialized libraries to do it like this one react code view npm
I am trying to write a simple markdwon previewer.
the problem is when I insert the Generated HTML text inside a div in render method like this:
render() {
return (
<div>
{this.state.genHTML}
</div>
);
}
it does not rendered, and displays as it written with its tags just like as if a string.
But with dangerouslySetInnerHTML the Generated HTML is got rendered.
I want to know why this occurs?
In general, setting HTML from code is risky(because of cross-site scripting (XSS)), and this is why in React you need to use "dangerouslySetInnerHTML" to set it. This is just a rule that you need to follow if you want to use a React framework.
I'm not really sure what is happening when the component tries to find the div, but here is my render and my div.
HTML:
<div id="app"></div>
Render function:
Meteor.startup(() => { ReactDOM.render(<App />, document.getElementById('app')); });
I get this error in the console: Error: Target container is not a DOM element.
I also put a console.log after my render function trying to find the div id but returned = null.
What packages have you got installed?
if you've still got blaze-html-templates or templating, remove them both and replace with static-html
Otherwise Meteor will render the html as a blaze template some time after startup. (Also if you're using React, you probably don't want to ship Blaze to the client as well!)
See http://archive.is/g20il#selection-399.104-399.186
Hard to see without your full html but your script tag to the .js script should be after the div id "app" tag.