How to use List component "items" prop in React Semantic UI?

Question

I can't understand how to use "items" property of React Semantic UI "List" component. Is there a way to pass it a function or a component it will use to render every item ?

<List items={repos} component={RepoListItem} />;
const RepoListItem = props => {
  return (
    <List.Item>
      <List.Content>{props.full_name}</List.Content>
    </List.Item>
  );
};

I look for a property like "component" here that could be used to set a rendering function or component.

Carl Pryke · Accepted Answer · 2019-02-06 09:51:12Z

1

You should be able to pass React Components an array of Child components if the parent allows it. Looking at the docs, this very much seems possible.

https://react.semantic-ui.com/elements/list/#types-basic

The example below comes straight from the docs

import React from 'react'
import { List } from 'semantic-ui-react'

const ListExampleBasic = () => (
  <List>
    <List.Item>Apples</List.Item>
    <List.Item>Pears</List.Item>
    <List.Item>Oranges</List.Item>
  </List>
)

export default ListExampleBasic

So what you want to do is generate an array of components for List.Item. based on the items state you provide. This can be achieved using the .map function.

import React from 'react'
import { List } from 'semantic-ui-react'

const RenderList = () => 
  <List>
    {repos.map((item) => RepoListItem(item))}
  </List>

const RenderRepoListItem = item => 
  <List.Item>
    <List.Content>{item.full_name}</List.Content>
  </List.Item>

As JSX has an XML-like syntax for compositional components, any children components are nested inside their parent.

Also, I'm not sure where List.Content is coming from, you could probably omit that and just have {item.full_name} directly inside List.Item

answered Feb 6, 2019 at 9:51

Carl Pryke

3491 silver badge7 bronze badges

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

2 Comments

Olivier THIERRY Over a year ago

Thanks Carl ! That's the solution I finally used.Anyway I don't understand what this "items" property is useful for. Maybe a shortaround for some cases where you just want to display the description as item ?

Carl Pryke Over a year ago

Looks like it will generate the List.Item array of child components for you if you pass it an array of state objects.

Collectives™ on Stack Overflow

How to use List component "items" prop in React Semantic UI?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related