Insert HTML With React Variable Statements (Jsx)

Insert HTML with React Variable Statements (JSX)

You can use dangerouslySetInnerHTML, e.g.

render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
    );
}

How to render variable with HTML elements in ReactJs?

Use map instead of foreach in render to create the array of li tags. Do not use string concatenation.

render() {

    let liTagsPagination= this.state.sectionsXml.map(function(elementSection, indexSection) {
         return <li><a id={"_sectionPage"+ indexSection} className="section">{indexSection+1}</a></li>;
    });

    const htmlPagination = (
      <div id="pages-nav-branch" className="col-xs-12 text-center">
          <ul className="pagination pagination-section pagination-sm">
              {liTagsPagination}
          </ul>
      </div>
    );

    return(
       <div>
          {htmlPagination}
       </div>
    )
  }

Insert React component into a String variable with html content

You can't render React component as innerHTML because its an object, don't confuse between JSX and HTML.

To solve it your need content to be a valid HTML.

Can be done by making ShareThis a function returning a valid HTML as a string:

const ShareThis = ({ text }) => {
  return `<div class="one-line">${text}</div>`;
};

const content = `
<p>Text 1</p>
!#ShareButton
<p>Text 2</p>
`;

const htmlcontent = content.replace(
  /!#ShareButton/g,
  ShareThis({ text: "Hello" })
);

const App = () => {
  return <div dangerouslySetInnerHTML={{ __html: htmlcontent }} />;
};

Note that you have a typo in regex expression: /!#ShareButton/

Inserting html inside string variable used in React component

An option is to change the strings in Text.js to html bits, like

export const exampleText = (
  <span>
    Graded is a application developed by 
    <a href='google.com'> Link here. </a>
    and myself for our second year user interfaces course.
  </span>
);

Insert HTML into user string and render it in React (and avoid XSS threat)

Couldn't you just

1. HTML-encode the tainted string from the user.
2. Do your search/replace and insert your HTML.
3. Then do the dangerouslySetInnerHTML().

That should safely escape whatever the user entered and leave your inserted HTML element alone, no?

JSX with a HTML tag from a variable

Try setting your component state and rendering like so:

render: function() {

            return(
                <this.state.tagName {...myProps}>
                  <div className="some-class">some content</div>
                </this.state.tagName>
            );

        },

React render html from a string with a dynamic variable

EDIT:

This should give you a good idea:

https://stackblitz.com/edit/react-ts-cwm9ay?file=DynamicComponent.tsx

EDIT #2:

I'm pretty good with React and interpolation, it's still in progress (specifically the docs, but the readme is complete) but I'm going to shamelessly plug my ReactAST library

EDIT #3 - If you're interested in doing crazy dynamic interpolation, then you might also want to check out a neat dynamic interpolation (and it's reverse) library

Let's assume this:

{
   vars: ['name','surname'],
   strings: ["<p>Hello, how are you {name}?</p>","<p> It's night to meet you {name} {surname}"],
   inputs: {
      input1: 'name',
      input2: 'surname'
   }
}

Create a component (or set of components) that can do this.

I haven't even ran any of this, but here's the idea. I'll put it in a stackblitz in a bit and polish it up to make sure it works:

const MyDynamicComponent = ({vars,strings,inputs}) => {
    const [state,setState] = useState(vars.reduce((acc,var) => ({...acc,[var]:undefined}));

     return (
        <>
         <MyDynamicText vars={vars} strings={strings} state={state}/>
         <MyDynamicInputs onChange={(name,val) => setState({[name]:val}) state={state} inputs={inputs}/>
        </>
     )
}

const MyDynamicText = ({vars,strings,state}) => {
   return strings.map((s,i) => s.replaceAll(`{${vars[i]}}`,state[vars[i]])
}

const MyDynamicInputs = ({onChange,inputs,state}) => {
   return Object.entries(inputs).map(([inputName,varName]) => <input key={inputName} onChange={e => onChange(varName,e.target.value)} value={state[varName]}/>
}

---

Related Topics