CODEWITHSUNDEEP
javascripthtmlreactjsjsxreact-component
Avery
Avery

Reputation: 13

Why is my React component rendering my JSX as text rather than HTML?

Please forgive me as I am a complete noob to JavaScript and React. I am trying to output a list of friends. props.friends is an array consisting of the friends' names. However, my code just outputs the <li> tags as text on the page

My code:

const Friends = (props) => {
    return(
        <div>
            <p>Hello, {props.name}.</p>
            <p>Below is a list of your friends: </p>
            <ul>
                {props.friends.map(x => '<li>' + x + '</li>')}
            </ul>

        </div>
    )
}

If anyone can please help me to figure why this is not rendering an actual list, and is just showing <li>friend1</li><li>friend2</li><li>friend3</li> as text, it would be greatly appreciated. Thank you!

Upvotes: 1

Views: 719

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370689

Your

.map(x => '<li>' + x + '</li>')

creates an array of strings, not React elements. If you want to render elements, you need to use JSX syntax.

.map(x => <li>{x}</li>)

Upvotes: 4

Related Questions