semantic-ui-react List onClick declaration

Question

i'm trying to create a list of documents dynamically with semantic-ui-react. I'd like to get the document title back when the list item is clicked. According to the documentation: https://react.semantic-ui.com/elements/list

there is an onItemClick prop for this reason, however when im using it i get a warning when it's rendered:

Warning: Failed prop type: Prop onItemClick in List conflicts with props: children. They cannot be defined together, choose one or the other.

Also clicking on the list item does nothing (atm i just want to log the doc title to the console). Here is the code:

handleListItemClick(event, data) {
  console.log("list item clicked: " + data.value);
}


buildResultsContainer() {
    return this.props.listOfResults.map((document,index) =>
      {
        return (
            <List.Item
              as='a'
              key={index}>
                <Icon name='file' />
                <List.Content>
                  <List.Header>{document.properties.title}</List.Header>
                  <List.Description>
                    {document.properties.description}
                  </List.Description>
                </List.Content>
            </List.Item>
      );
      }
    );
  }

  render() {
    return (
      <div>
        <List onItemClick={this.handleListItemClick}>
          {this.buildResultsContainer()}
        </List>
      </div>
    )
  }

Can you please tell me how to use properly the onItemClick prop for the List component?

Less important, do you have any tip how to refactor the list rendering? Just wanted to keep the render function short and clean, but this function call looks a bit overkill....

Thanks a lot!

Anthony · Accepted Answer · 2018-03-26 00:08:54Z

5

I think maybe the intent when using onItemClick is that you would use the items prop on List since then you wouldn't have any children e.g.

render() {
    const items = this.props.listOfResults.map(document => {
      return {
        icon: 'file',
        content: document.properties.title,
        description: document.properties.description,
        onClick: e => console.log(document.title)
      }
    });

    return <List items={items} />
  }

If you had your listOfResults prop in the above format, you wouldn't even need to do this map and your render function would be super tight:

render() {
  return <List items={this.props.listOfResults} />;
}

Alternately, List.Item takes an onClick prop that you could define in your buildResultsContainer() function. Because each onClick function is unique based on the current document object, you will need to use an anonymous function to call your handleClick function as follows:

<List.Item
  onClick={() => this.handleClick(document.title)}
  ...etc
/>

You would then have:

handleClick = docTitle => {
  console.log(docTitle);
};

If what you wanted was obtainable from event.target, you could just pass the reference of handleClick to the onClick i.e.

handleClick = event => {
    console.log(e.target.innerText);
};

<List.Item
  onClick={this.handleClick}
/>

edited Mar 26, 2018 at 0:08

answered Mar 25, 2018 at 22:47

Anthony

6,5122 gold badges20 silver badges36 bronze badges

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

9 Comments

inspiral Over a year ago

Thanks! I tried so far the alternate idea: if i give an onClick for the List.item , the function is called immediately when the list is rendered. Which is kinda strange.

Anthony Over a year ago

<List.Item onClick={e => console.log(document.title)} /> ?

inspiral Over a year ago

In this case it works well. Strange (at least to my current reactjs knowledge) why onClick={this.handleListItemClick(document.properties.title)} gives different result.

Anthony Over a year ago

because what you are passing there is function invocation, as opposed to reference to the function. I will add an example

inspiral Over a year ago

Makes complete sense, it explains also why it was called during rendering in my attempt. Both of your suggestions worked flawlessly, thanks a lot!

|

Collectives™ on Stack Overflow

semantic-ui-react List onClick declaration

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related