Can I write HTML tags inside of a React code?

Question

Sorry I'm newbie to React. It might be a stupid question but can I write HTML code inside of a React code? I'm trying to make a custom block for my wordpress theme and found a example code of JavaScript.

/* This section of the code registers a new block, sets an icon and a category, and indicates what type of fields it'll include. */
  
wp.blocks.registerBlockType('coin-info/border-box', {
    title: 'color-info',
    icon: 'money-alt',
    category: 'common',
    attributes: {
      content: {type: 'string'},
      color: {type: 'string'}
    },
    
  /* This configures how the content and color fields will work, and sets up the necessary elements */
    
    edit: function(props) {

      function updateContent(event) {
        props.setAttributes({content: event.target.value})
      }
      function updateColor(value) {
        props.setAttributes({color: value.hex})
      }
      return (
        "div",
        null,
        React.createElement(
          "h3",
          null,
          "Simple Box"
        ),
        React.createElement("input", { type: "text", value: props.attributes.content, onChange: updateContent }),
        React.createElement(wp.components.ColorPicker, { color: props.attributes.color, onChangeComplete: updateColor })
      );

    },
    
    save: function(props) {

      return wp.element.createElement(
        "h1",
        { style: { border: "3px solid " + props.attributes.color } },
        props.attributes.content
      );

    }
  })

I inserted some div tags and p tags inside of the code like HTML, but keeps giving me error. I think I need to study it later LOL

Roman Bova · Accepted Answer · 2022-06-03 18:47:09Z

1

Well, it is kind of tricky question. The problem that you cannot use HTML directly in React js files. To make things working you need to have a babel compiler that will replace you HTML tags with React objects.

The code you've sampled it using compiled code (React.createElement). You have to pass this data as a child of some react component to make it work.

So or you using enter link description here or use Babel compiler to prepare your code.

answered Jun 3, 2022 at 18:47

Roman Bova

544 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can I write HTML tags inside of a React code?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related