score:1
there is nothing you need to change in your code as is (besides the extraneous semicolon in the ternary expression). simply pass the string "h1"
as the value of the component
prop.
jsx is just syntactic sugar for calling react.createelement
. if the jsx tag starts with an upper case letter it is left as is and is passed as the first argument to react.createelement
, otherwise if the tag name begins with a lower case letter it will be turned into a string and then passed as the first argument.
function testcomponent(){
return <div>testing!</div>;
}
the above gets turned into this plain javascript:
function testcomponent(){
return react.createelement("div", null, "testing!");
}
when the example testcomponent
above is rendered, react.createelement
will create a react element that renders to a ’normal' <div>
element.
for your component, wherever the <wrapper>
jsx tag is used, wrapper
will be passed as the first argument to react.createelement
. the value of wrapper
could be a react component, but it could also just be a string, such as "div"
. so all you’ve have to do is use your code like this:
const textlikerender = ({ value, component: wrapper }) => {
if (value.type === "html") {
return <wrapper dangerouslysetinnerhtml={{__html: value.content}} />;
} else {
return <wrapper>{value}</wrapper>;
}
}
<textlikerender value={{type: 'html', content: 'this is <br/> html'}} component="h1" />
finally — this is irrelevant to the question, but a component like this would probably be better with type
and value
both being separate props, and even better would be to not have textlikerender
take a component
prop, and leave wrapping it to the code using it. and, given you can pass any value as a prop, it would be much better (not to mention safer and more secure) to avoid dangerouslysetinnerhtml
completely and pass ["this is ", <br />, " html"]
as the value instead, if that’s possible.
score:2
one possible solution is to use react.createelement
inside textlikerender
. this way you can pass component as string.
export const textlikerender = ({ value, component:wrapper })=> {
return value && value.type==='html' ?
react.createelement (wrapper, { dangerouslysetinnerhtml: {__html: value.content} }) :
react.createelement (wrapper, {}, value && value.content)
}
usage
<textlikerender value={{type:'html',content:'this is <br/> html'}} component='h1' />
Source: stackoverflow.com
Related Query
- How to pass data from blade.php file to a react component using HTML element attributes?
- In React how to pass standard html as component?
- how to style react child component under standard HTML element?
- How can i pass HTML inside React Hook Function and display inside my component secure?
- How to pass in a react component into another react component to transclude the first component's content?
- React - How to pass HTML tags in props?
- React - how to pass state to another component
- React - How to pass props to a component passed as prop
- Is there a right way to pass data into a React component from the HTML page?
- Making an HTML string from a React component in background, how to use the string by dangerouslySetInnerHTML in another React component
- How to pass a state className variable to another component in react
- How to pass props to component inside a React Navigation navigator?
- How to pass an event handler to a child component in React
- using css modules in react how can I pass a className as a prop to a component
- How to pass the match when using render in Route component from react router (v4)
- How to convert react component to html string?
- How to pass in an instance variable from a React component to its HOC?
- how to import HTML file into React component and use it as a component?
- Pass React component to HTML attribute
- How to pass a React component as a prop
- How do I pass a Prop to a Navigation Screen Component - React Native
- How to pass props to react component that wrapped in variable
- Drag and Drop in React.js. How to pass custom react component in setDragImage
- How to pass props of React component to styled component
- How do I pass all state variables inside react hooks to my child component
- How to pass nested styling to a component in React
- How to pass data from React Form -> Flask Backend -> React Component (does it have something to do with CORS)?
- How to pass a react component as a variable, to child component?
- How to put React component inside HTML string?
- How to pass input value from child to parent component react
More Query from same tag
- How to call redux-saga action continuously after every 60 seconds
- Can i subscribe to filtered RTK query data results across multiple components?
- Cannot access 'this' in ReactJS
- How to solve, craco: *** Cannot find ESLint loader (eslint-loader). *** error with ANTd and React (2021)
- What is AppBar vs ToolBar?
- Why React.memo doesn't work with `props.children` property?
- React JS: Expected a string but got: object
- What is the difference between "onClick = { () => this.props.onClick() } and onClick = {props.onClick }?
- Can't use React-Router in React Typescript
- Redux - Filter / Delete multiple items from array of objects. Items to be filtered given in another array
- Convert object to array with Lodash _.map and use map function in React
- Why to do I get error: Actions must be plain objects. Use custom middleware for async actions.?
- Keeping same dimensions when switching content
- Getting an array from the redux store puts it inside another array
- 401 Error in React and django-rest-framework app
- How to make required field in react dynamically?
- Reset form input values in React
- React-Router does not redirect me from a component
- how to add elements to an array when looping
- react js setstate inside event inline function
- React only binds Component methods to this - work around?
- AWS polly (text to speech) in react js. cannot get the AWS context to give credentials
- Create a separate submit button for every section in antd dynamic field
- Make Multiple Post Requests In Axios then get all the response to make another request
- how to get title of clicked component and use that title in another component?
- Not able to pass data from HTTP post request to the javascript(expressjs) controller
- Save SVG as PNG (or other) with javascript
- Loop in array through objects with find()
- mapping elements from array in reactJS
- Make Item go the bottom using Flexbox and Material UI