Displaying foreign key values and images from Redux in Material UI component

[james_g2001]

I have managed to get both foreign key values and image url paths inserted into my Redux store and now I don’t know how to display them.

In the CardMedia segment how do I know that the path is working correctly? At the minute I just have the “image={photos}” and then my Redux data is being iterated into each display component.

In regards to foreign key values in Redux I have tried “articleList.userID_FK2.username” rather than “articleList.userID” as it was just giving me a number value. What is the correct way to print the fk value?

const user = useSelector(state => state.auth.user);

    const articleList = useSelector(state => state.article.articleList);

    const [article, setArticle] = useState({
        expanded: false,
        error: ``
    })

    console.log(user.userID)
    // get access to dispatch
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(requireArticleData());
    }, []);

    const handleExpandClick = () => {
        const {state} = this
        setArticle({...state,expanded: !state.expanded})
    };


const UserDiveLogDisplay = ({ articleTitle, articleContent, userID, articleType, photos }) => (
        <Card className={classes.root}>
            <CardHeader
                avatar={
                    <Avatar aria-label="scubaSchool" className={classes.avatar}>
                        A
                    </Avatar>
                }
                action={
                    <IconButton aria-label="settings">
                        <MoreVertIcon />
                    </IconButton>
                }
                title={articleTitle}
                subheader={userID}/>
            <CardMedia
                id="Photos"
                className={classes.media}
                image={photos}
                title="Dive Photos"/>
            <CardContent>
                <Typography className="Type" id="Type" variant="body2" color="textSecondary" component="p">
                    {articleType}
                </Typography>
            </CardContent>