Pass data through semantic react ui card component in the onclick() method

Question

I am trying to get data passed in the onclick method on the Semantic React UI card component, with the simple objective of drilling into a detail page on a record displayed in the card component.

I understand that this component creates a react synthetic event for the onclick() method and passes in (event, data) to the defined function.

How can I see what is actually being passed in though? I try to log out JSON.stringify(data) in the onHandleClick() function i've defined to see what's there, but i get a 'converting circular structure to JSON' error.

All I am looking to do is pass through the key value on the card to the detail component and then I can filter out my redux store to get the single record and display it in the detail component.

The component is below: Card.js

  newsArticles() {
    if (this.props.content.isLoading) {
      return (
        <Grid.Column stretched>
          <Message>
            <Message.Header>Not Quite There Yet</Message.Header>
            <p>To see your content, please select a channel from the dropdown list above</p>
          </Message>
        </Grid.Column>
      );
    } else {
      const cards = this.props.content.data.map( article => {
        let contentId = article.key;
        return (
          <Grid.Column stretched>
            <Card key={contentId} onClick={ ( event, data) => this.handleOnClick(event, data)} style={{ marginBottom: '2em'}}>
              <Image src={this.props.auth.data.sfInstanceUrl + article.image} />
              <Card.Content>
                <Card.Header>
                  {article.title}
                </Card.Header>
                <Card.Description>
                  {article.excerpt}
                </Card.Description>
              </Card.Content>
            </Card>
          </Grid.Column>
        );
      });
      return cards;
    }
  }

  render() {
    return(
      <Segment placeholder>
        <Grid centered stackable columns="4" textAlign="center" verticalAlign="top">
          <Grid.Row style={{ marginBottom: '2em' }}>
              {this.newsArticles()}
          </Grid.Row>
        </Grid>
      </Segment>
    )
  };

To handle the click event, i'm just trying to log out what's delivered through the onclick() method. Ultimately, i'd just like to pass out the contentId variable to the handle function..

  handleOnClick( event, data ) {
    // function to navigate to single article
    console.log(`data is: ${JSON.stringify(data)}`);
  }

Answer 1

data contains props, which contains its children (array of components). each child is a component and contains a property _owner that references itself, hence the circular reference error.

since I believe you are interested in other props than its children you can do as the following:

  handleOnClick( event, {children, ...data} ) {
    // function to navigate to single article
    console.log(`data is: ${JSON.stringify(data)}`);
  }