Having issues sending props from a api call into another react component

Question

Ok so I want to make a API call to my GraphQL backend to get an array of campaigns which I want to display on the React frontend in the form of a card. When I make the API call to get all campaigns I get this as a response:

{data: {campaigns: [{id: "1", title: "Lucky's Gaming Services",…}]}}
  data: {campaigns: [{id: "1", title: "Lucky's Gaming Services",…}]}
    campaigns: [{id: "1", title: "Lucky's Gaming Services",…}]
     0: {id: "1", title: "Lucky's Gaming Services",…}
       body: "Lucky is opening a gaming service online which allows users to repair gaming 
             consoles"
       campaignType: "FC"
       couponPrice: 5
       couponsCount: 4
       creator: {id: "3", username: "test1", __typename: "UserModel"}
       id: "1"
       slug: "luckygamingservices12"
       title: "Lucky's Gaming Services"
       __typename: "CampaignModel"

Currently the campaigns array is just 1 campaign as shown above. Each campaign has attributes such as body, id, title, slug etc.

On my react page, I basically make a call to get this response and then I handle it with this code on the main page:

           {loading ? ( <h1>Loading Campaigns...</h1>
            ) : (
              data && data.campaigns.map(campaign => (
                <Grid item xs={12} sm={6} md={4} key={campaign.id}>
              <Card campaign={campaign} multiple={true}/>
              </Grid>
              ) )
            )}

Above I pass the campaign into the Card component

On the card component, how do I import the attributes of each campaign such as the body, title, id etc. so i can display that information for each campaign card in the array.

export default function Card(props) {
    const classes = useStyles();
    return (
        <>
             <Card className={classes.root}>
                        <CardActionArea>
                            <CardMedia
                            className={props.multiple ? classes.mediaMultiple : classes.media}
                            image="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEyMDd9"
                            title="Contemplative Reptile"
                            />
                            </CardActionArea>
                            <CardContent>
                            {props.multiple ? <Box color="#8f8f8f" mb={2} mt={0.5} fontSize={14}>Grund</Box>:
                            <Typography gutterBottom variant="h5" component="h1">
                                CAMPAIGN TITLE
                            </Typography>}
                            <Typography variant="body2" color="textSecondary" component="p">
                                CAMPAIGN BODY
                            </Typography>
                            </CardContent>
                        
                        </Card>
        </>
    )
}

Previously it worked when I did this:

export default function Card({campaign: {body, id, couponPrice, couponsCount, slug, title, campaignType, creator}}) {

I get this ERROR: TypeError: Cannot read property 'body' of undefined

How do I pass the attributes/props from the main page into the Card component? It was working fine before but i dont know why not anymore :(

CWSites CWSites · Accepted Answer · 2020-10-08T18:51:59

I see that you're passing campaign as a prop and then on your <Card /> component you are grabbing the props as an argument however I don't see anywhere that you are assigning body to a variable for use.

You could try iterating over the props by adding the following...

const classes = useStyles();
const {body, id, couponPrice, couponsCount, slug, title, campaignType, creator} = props;

From there each of those should be saved to a const that you can use throughout your <Card /> component. For instance you should be able to place {body} where you want it to appear.

Having issues sending props from a api call into another react component

1 Answers