How can I access the values of the props in my component?

Question

I have this jsx component ArticleListItem which receives data as props and displays it. When I run my web app, I get this error: Objects are not valid as a React child. How should I handle the props to access them the way I'm trying. Here's the ArticleListItem component which throws the error:

import { Link } from 'react-router-dom';
import { Button, Icon, Item, Segment, SegmentGroup } from 'semantic-ui-react';

export default function ArticleListItem(props) {
    return(
        <SegmentGroup>
            <Segment>
                <Item>
                    <Item.Header>
                        {props.article.title}
                    </Item.Header>
                    <Item.Content>
                        {props.article.description}
                    </Item.Content>
                </Item>
            </Segment>
            <Segment>
                <span>
                    <Icon name='clock' /> {props.article.publishedAt}
                    <Icon name='newspaper' /> {props.article.author}
                </span>
            </Segment>
            <Segment>
                <span>
                    <Icon name='globe' /> <Button>
                        as={Link} 
                        to={props.article.url} 
                        color='teal' 
                        floated='right' 
                        content='View' </Button>
                </span>
            </Segment>
        </SegmentGroup>
    )
}

Here's an example of the props

 {
    "source": {
      "id": "business-insider",
      "name": "Business Insider"
    },
    "author": "Diamond Naga Siu",
    "title": "See how much Apple pays engineers, analysts and thousands of others",
    "description": "Insider analyzed thousands of Apple's H-1B visa applications to get a sense of how much it pays employees.",
    "url": "http://www.businessinsider.com/see-how-much-apple-pays-engineers-analysts-and-thousands-others-2022-9",
    "urlToImage": "https://i.insider.com/633222528345c90018de0060?width=1200&format=jpeg",
    "publishedAt": "2022-09-28T12:00:00Z",
    "content": null
  }

And here's the code block where I'm passing the props to this component:

return (
        <>
            {props.articles && props.articles.map(article => (<ArticleListItem key={article.title} article={article} />
        ))}
        </>
    )

The idea of my web app is to fetch news from my api and to show them. I get an array of news, map over them and create an ArticleListItem for each of them. Any help appreciated!

Answer 1

Your props are not inside the button tag. The ">" tag was misplaced

<Button
   as={Link} 
   to={props.article.url} 
   color='teal' 
   floated='right' 
   content='View'>
 Test 
</Button>