REACT: Dynamic list rendering without array

Question

What I'm trying to achieve with this question is to not pass the <li> tag in the App.js component. The only solution I've found with the REACT documentation is to use an array and map it to <li> tag. The thing is that doing it this way is not so clean.

App.js

const App = () => {
  <Component>
    <li>
      <Link> Item 1 </Link>
    </li>
    <li>
      <Link> Item 2 </Link>
    </li>
    <li>
      <Link> Item 3 </Link>
    </li>
  </Component>
}

Component.js

const Component = ({children}) => {
  return(
    <ul>{children}</ul>
  )
}

Edit: My components where cluttered with unnecessary tags.

I think you'll need to provide a clearer example for what you want. I don't think it's clear at all what you are asking for. If you are rendering an unordered list you'll need to render a list item (li) as a child, then you can render any child element/component from there. — Drew Reese
– Drew Reese, Commented Aug 8, 2021 at 23:53
I'll agree not clear. That being said, you may consider a react fragment <>stuff</> — silencedogood
– silencedogood, Commented Aug 8, 2021 at 23:55

Peter B · Accepted Answer · 2021-08-09 09:39:06Z

1

You can use React.Children.map to make the <li> be added to each of the children, instead of making each child responsible to do it for themselves:

const App = () => {
  <Component>
    <Item />
    <Item />
  </Component>
}

const Component = ({children}) => {
  return(
    <ul>
      {React.Children.map(children, (child, i) => <li key={i}>{child}</li>)}
    </ul>
  )
}

edited Aug 9, 2021 at 9:39

answered Aug 8, 2021 at 23:57

Peter B

24.7k5 gold badges42 silver badges94 bronze badges

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

3 Comments

Drew Reese Over a year ago

The children prop isn't an array, so you can't just map like this.

FelipeFa Over a year ago

The comment of @DrewReese is correct. Nonetheless, there is a workaround to convert the children prop into an array. React.Children.map(children, (...))

Peter B Over a year ago

Ah you're both right, it was late... now fixed.

Collectives™ on Stack Overflow

REACT: Dynamic list rendering without array

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related