I am trying to build a react app with customized components. The input to the app is a jsx(as a string) coming from an API.
Now i want to render this input jsx (a string variable), but not able to do that. I have tried eval() and dangerouslySetInnerHTML options, but it did not work out.
My JSX String looks like
'<div> <MyComponent attr_1={this.state.array["field"]}></MyComponent> </div>'
Hi I figured out JsxParser is the right way of solving my problem.
react-jsx-parser provides capability to parser and render react component from JSX string.
Related
I have an svg in a String variable. I get this string from an API call, so this information is dynamically present. I want to render this string via React.createElement dynamically on browser. How do I do this?
One way is to parse svg string into elements, then call React.createElement(...) for each element inside svg recursively, but writing an SVG parser doesn't seem to be optimal. Is there a cleaner way?
Thanks
You can try this: <div dangerouslySetInnerHTML={{__html:'<svg ....></svg>'}}/>
React is able to print any primitive values and react elements with JSX but if it encounters any object in JSX then it throws an error as "Objects are not valid as react children".
Please help me understand this and get the reason behind it.
Technically you can use objects as children only for components (but not for elements).
When you use objects as children for your own component where you can decide how to handle this object in the render <p>{children.someText}</p>, but when you use an object for an element <p>{{ someText: 'hey' }}</p>, React doesn't know how to parse it.
So, React throws the error to notify you that you are doing something wrong.
You have a JSX in Depth section in React docs.
What are valid children in React and why?
Since JSX is synthetic sugar for React.createElement, this function defines React element:
The type argument can be either a tag name string (such as 'div' or 'span'), a React component type (a class or a function), or a React fragment type ...
React.createElement(type, [props], [...children]);
Tag name string is an HTML element string representation.
React component is an object created by React.createElement
React fragment is a special type created by React.createElement(React.Fragment,...).
Why objects are not valid as react children?
// Objects are not valid as react children
<>
{ a:42 }
</>
Because objects are not in type definition of React.createElement.
I have posted the same question to Dan Abramov in Twitter. Here is his reply to my query.
Initially I had this in my mind and from his reply it was clear now. Ask yourself the following question(s) to answer it yourself.
What do you expect to see when you use an object as children?
How should an object be shown by React or DOM? Should they just show [Object object] or JSON string of that object?
Well, it's really not clear on how to represent an object on the UI. After all, what we see on the page is mostly string content inside some html tag. So, react simply throws an error without proactively converting object to it's toString() or JSON representation and then showing it on the UI.
So, we as a developer should take out the relevant primitive information from that object and render in our components.
Addition on using function inside JSX expression:
{() => console.log("I am arror function")}
React smartly warns us without throwing error and it is self explanatory.
Code in Atom - lookin nice :D
This code won't working and I have no idea why ;/
In app it's making empty markup and under text "zehy".
I'm new in ReactJs and it's very frustrating ...
Components need to be PascalCase in order to work. In JSX, lower case names aren't treated as html tags. Change <taskItem /> to <TaskItem />
React components need to be upper-cased first letter (capitalised).
See https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components
Am very new to react js and aurelia js, my requirement is use react for view and aurelia for model/routing and all. I refered this doc for installation, it works well. Done like this,here my view is in react js, while clicking the details in the table(doted icons),needs to call a function which should be in aurelia.
I followed the above mentioned doc for coding, instead of list in the my-react-element.jsx i changed into table style like in the pic.
Yeah, i got it. just understand passing value to components (custome-component in aurelia, component in react). In both, aurelia and react it works nearly same(like call-back function).
Code :
react-example.js Just declare a function, which you want to execute.
myfun(){
alert('Hi, am in aurelia..');
}
react-example.html use bind to set the declared function to custome-component.
<react-element myfun.bind = "myfun"></react-element>
react-example.js
#bindable('myfun')
<MyReactElement data={this.data} myfun={this.myfun}/>,
my-react-element.jsx
<p onClick = {this.try.bind(this)} >click </p>
try() {
this.props.myfun(); }
Note : Basic knowledge of react and aurelia required and compare the doc to fix.
This is my first using of react.js and
Code works in browser but html is highlighting in red how to fix this. I'm using JSX Harmony, Webstorm 11 ?
You can't put raw HTML/JSX into render. If you look at the docs, you'll see that you need to pass a ReactElement to render.
The easiest way to do that would be to create a simple React class using React.createClass()