How to insert span HTML elements into React object?

Asked

Viewed 91 times

0

That is the code

import React, {Component} from 'react';

const content = {
  title: `Cl<span className="mask">i</span>entes`,
  description: 'Veja abaixo nossos clientes!'
}

export default class Hero extends React.Component {

    render() {
        return (
            <div id="hero">
              {content.map((item) => (
                <div class="hero-content">
                    <div class="hero-header">
                        <h1>{item.title}</h1>
                        <h2>{item.description}</h2>
                    </div>
                </div>
                ))};
            </div>
        );
    }
}

And here’s the image of how it’s being displayed:

inserir a descrição da imagem aqui

react

1 answer

0


title: <div>Cl<span className="mask">i</span>entes</div>


const App = () => {
  const content = {
    title: <div>Cl<span className="mask">i</span>entes</div>,
    description: 'Veja abaixo nossos clientes!'
  }

  return (
    <div id="hero">
        <div className="hero-content">
            <div className="hero-header">
                <h1>{content.title}</h1>
                <h2>{content.description}</h2>
            </div>
        </div>
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector("#app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

  • 1

    Thank you @André Luis

Browser other questions tagged react

You are not signed in. Login or sign up in order to post.