Include HTML content without adding it in REACT classes


I have a somewhat simple doubt, maybe others have had it before. I'm starting with react and, as we know, the main thing is to change content segments through the components. Now, I have a specific doubt. If when updating a segment, I would like to include direct HTML (without having to create it in the render method of the jsx file, but an html file). Since I do not require certain logic with such HTML, can I do it?

Punctually, I'm working with an app, in which I have two segments and I update both: "main" and "footer". But there are sections, in which for example, I want or need to include text in html, images or other elements that are static and I really do not need to verify anything, so it seems to me that I fill the files jsx with unnecessary code, but I do not know, how could you add them if they are part of a component that is updated.

Thank you.

asked by jrodriguez 15.01.2017 в 14:35

2 answers


What you can do is what is known as a Stateless Component which is used to display HTML or Components that are children of other State Components and are created like this:

I forgot to add import React from "react"


import React from 'react'

const Header = () => 
Soy Header

export default Header

if you are going to add props and logic to your component then

import React from 'react'

const Footer = (props) => {
 if (!props.year) {
  return ( <footer>MiApp todos los derechos reservados 2017</footer>)
 } else {
  return (<footer>{'MiApp todos los derechos reservados ${props.year}'}</footer>

export default Footer

And in the end you use them like any React component


import React, {Component} from 'react'
import Header from './components/Header'
import Footer from './components/Footer'
import {render} from 'react-dom'

class MiApp extends Component {
 render() {
  return (
    <h1> La mejor App del mundo </h1>
   <Footer year="2017"/>

render(<MiApp/>; document.querySelector('#app');
answered by 15.02.2017 / 20:26

You can use external html, this is practical for cases in which you want to show, for example, a help. In the following code 'Loading' is a component that shows a gif and a text to choice. we use a fetch to load the html file, while the html file is being loaded, we show the 'Loading' component when the load finishes, we replace it with our html. We use dangerouslySetInnerHTML to display it.

import React from 'react';
import {Logo,Toolstrip,Loading} from '../util/Controles.jsx';
import 'whatwg-fetch';
export default class Visor extends React.Component {
    constructor(props) {

    render() {
            return (<div>
                    <Logo />
                   <Loading span="Obteniendo ayuda..." />
        var htm={__html:this.state.html};
         return (<div>
                    <Logo />
                    <div dangerouslySetInnerHTML={htm} ></div>


    componentDidMount() {
        var me=this;
        .then(function(response) {
            return response.text();
        }).then(function(data) {
        }).catch(function(ex) {


answered by 16.02.2017 в 02:14