如何在另一个语义ui中添加div？

Question

i have this function

createSection = () => {   
     let div = document.createElement("div")
     div.innerHTML =
                    `<section>
                        <Grid centered>
                            <Item.Header  style={{'paddingBottom': '20px', color: 'red'}} as='h1'>{this.state.contents.inputTitle}</Item.Header>
                        </Grid>
                        <Item.Description style={{'maxWidth': '100%'}}>
                            {this.state.contents.inputContent}
                        </Item.Description>
                        <Item.Extra></Item.Extra>
                    </section`             
     document.getElementById("teste").appendChild(div)
}

and i want to add a section in the div

<div onClick={this.createSection} id='teste' style={{'backgroundColor':'#178776', 'boxShadow':'inset 0 3px 27px 19px rgba(15,56,94,.6)', 'borderRadius': '30px', padding: '30px'}}>    
</div>

But what appear in div is: {this.state.contents.inputTitle} {this.state.contents.inputContent} What i have to do for this works correctly?

Answer 1

@Deborah Luperini, you should not create components in such way in React because it does not vanilla JS, you have to either use JSX, i made working example

or last decision and not the best it a using React.createElement where you need set your parent element, properties and children, i found an example with unordered list, may be it helps you, but i am not recommend use it:

React.createElement("ul", {"className": "ingredients"},
   React.createElement("li", null, "1 lb Salmon"),
   React.createElement("li", null, "1 cup Pine Nuts"),
   React.createElement("li", null, "2 cups Butter Lettuce"),
   React.createElement("li", null, "1 Yellow Squash"),
   React.createElement("li", null, "1/2 cup Olive Oil"),
   React.createElement("li", null, "3 cloves of Garlic")
);

hope it'll help you, good regards