React Native render HTML to string for alert function - javascript

As the title said, i don't want to render in component, just to strings.
i want to pass it on Alert function
I know there are a lot of library for rendering html, but all of them render to component.

Related

How to append or inject React Class Component in a Modal outside React Tree

We have a project build in PHP MVC Framework and we use jQuery as a global JS framework in handling UI activity etc, however, we are now using react js. Therefore, my question is how can I inject or append React Functional/Class-based Component to a current jquery built-in modal() component? I try to run the following code but the modal content shows [object Object]...
onClick handler:
this.testHandler = () => {
const x = `<div>${<Component />}</div>`
$('#test-123').modal()
$('#test-123 #modal-body').append(x)
}
This Component Returns a Table with a list of data coming from api endpoint, the table is working and displaying properly when i render it. But my main goal is to use it outside and inject it as a modal content.
Thanks in advance!
The way to render a react component outside of react is to call ReactDOM.render, passing in the react element you want to render and the dom element you want to put it in. For sites that are fully done in react, you would typically call this exactly once. But if necessary, you can do it on the fly or multiple times, targetting specific pieces of your dom.
const element = $('#test-123 #modal-body').get(0);
ReactDom.render(<div><Component /></div>, element);
Be aware that React assumes it is the only piece of code modifying the part of the dom tree that you tell it to operate in. So you should avoid making any further changes to the #modal-body element using jquery.

React: trying to use jquery after componentDidMount

I have a react Class component using the componentDidMount method. I'm trying to append things to a div after the entire component is rendered.
For each react component rendered it includes a div with a unique id such as chartcarsousel1 or chartcarousel2 or charttopmovies. The unique id in each rendered component comes from adding the string 'chart' with a variable passed to the component. For example if the variable name is key, the div's id will be: 'chart'+key.
I'm trying to append some things to that div in my react component after it is rendered but this does not work:
componentDidMount(){
$('div#chart'+key).html("test");
}
Mixing jQuery with React could be a really bad idea if you don't understand React properly. Use some references and arrays to render a list of children. I suggest to take an only React's approach first. If you dive deeper on the problem you're facing, please, share more parts of your code.

Passing data to React component through Laravel blade

I don't know if this is even possible or maybe this is just a stupid question, but here it goes:
Is it possible to pass data from you Laravel controller to a React Component through a blade template?
I'm asking this because I have a form where I have three static form elements (name, description & deadline) that are defined in blade and a dynamic part that adds elements (extra fields; name, description and type for each extra field) to the form on a button click.
I also want to use the component for editing, so I need to push data into it. My train of thought was to use React for the dynamic part so that I don't have to use native JS or jQuery to build this.
Note that I'm a beginner at React so I this point I don't even know if I'm doing it right/wrong. I've added a screenshot of the form to show illustrate what I mean. (sorry it's in Dutch but I've tried to add some notes to make it clear)
This maybe will help you out:
under Rendering json ..
This is how vuejs works. Your controller would return a variable like $project and you would pass it as a prop into your component by using #json($project)

How to deal with components inside dynamic html strings in Sapper & Svelte?

I am trying to make my first Sapper site and I'm populating the content similarly to how it's done in the template here.
My problem is that I want to allow usage of custom components in the content of {#html post.html}. Currently it doesn't work, the HTML is just inserted there without being treated like a component, even if I import the component in [slug].html and it works if used directly somewhere besides that {#html post.html}.
The behaviour is kind of expected as the content is fetched after svelte has finished it's work, but I am not sure what should I do then. I want a couple of custom components like <FancyButton> to be usable in the user generated content.
Can I ask the [slug].html component to look at the post.html or just whole content after insertion and create an instance of child component wherever it should be? Or should I somehow compile the string beforehand on the server?

Angular2 pass html to component

I am trying to create a component which displays a code example for a given component. The component shall be passed as HTML to the code-example component and be rendered once normally but also have its code displayed below.
When trying to fetch the code from <ng-content> in ngOnInit, Angular already started rendering the component, which means that I do not get the original code between the tags.
Passing the code via input does not work out, as the components may use single and double quotes which will cause problems when binding the data.
What I also tried is passing the code escaped to the component like
<code-example>
<component></component>
</code-example>
To unescape it and render it afterwards, which did not work out for me as I had trouble adding this pre-defined element to the DOM in a way that Angular renders it as a component.
Are there any other methods of dealing with this problem that I might be missing?
As #Timothy suggested you may try the <pre> tag.
If you also want to highlight the syntax of your code I can recommend a third party module called ng2-prism.
This is a library that supports multiple languages and is quite easy to use.

Categories

Resources