CODEWITHSUNDEEP
javascriptreactjs
codebee
codebee

Reputation: 844

Return multipe <li> elements from React Component

I want to return multiple <li> tags from my component's render() method, however React enforces you to have a single parent, which could be </>. I'm performing some logic with element's parent, so I cannot have a parent for these <li> elements; <ul> for <li> elements is in another component and it cannot be moved. So how can I return multiple <li> elements from my component? Thanks.

Upvotes: 0

Views: 184

Answers (3)

Lesha Petrov
Lesha Petrov

Reputation: 151

You can return an array of elements too in React.

return ([<div />,<div />,<div/>])

Upvotes: 1

Jaisa Ram
Jaisa Ram

Reputation: 1767

React Fragment

return (
  <>
    <li/>
    <li/>
  </>
)

or

    return (
      <React.Fragment>
        <li />
        <li />
      </React.Fragment>
    )

For more details https://reactjs.org/docs/fragments.html

Upvotes: 3

Ishan Joshi
Ishan Joshi

Reputation: 525

Try:

return (
    <React.Fragment>
        <li />
        <li />
    </React.Fragment>
)

Upvotes: 1

Related Questions