props in functional component

Question

I am not very familiar with using props in function components and I want to basically connect two functions in one functional component, and use the data from it.

Here is my code. I want to fetch data from a database and display it in cards using the map method.

import {React, useEffect, useState} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import clueData from './ClueData';
import client from '../api/client';
import { Chip, Container, Grid } from '@material-ui/core';

const RenderClues=(index)=> {
   const classes= useStyles();
   const [data, setData] = useState([]);
   useEffect(() => {
       const fetchData = async () => {
           const result = await client.get('api/admin/mission')
           setData(result.data.Missions);
       }
       fetchData();
   }, []);
   
    return (
      <Card key={index} data={data}  style={{ marginBottom: 10, padding: 10 }}>
        <CardContent>
          <div className={classes.container}>
            <Typography className={classes.title} color="textSecondary" variant="ul" >
              Clue : {data.cluename}
            </Typography>
            
            <Chip size="small" label={clue.isSolved? "solved" : "unsolved" } />
          </div>
        </CardContent>
        <CardActions style={{ display: 'flex', justifyContent: 'space-between'}}>
          <Button variant="contained" size="small" href="/photo-clue">View</Button>
          <Typography color="textSecondary">
            {data.points}
          </Typography>
        </CardActions>
      </Card>
    );
}

function Clues(props) {
 
    return (
      <Container maxWidth="md">
        <Grid item xs={12} >
          {props.data.map(RenderClues)}
        </Grid>
      </Container>
    );
}


export default Clues;

const useStyles = makeStyles({
    title: {
      fontSize: 20,
      color:"olive",
      fontWeight: 'bold',
      textAlign: 'left',
    },
    pos: {
      marginBottom: 12,
    },
    points: {
      float:"right",
    },
    container: {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'space-between',
      marginBottom: 10,
    }
  });

But there is something wrong in the way I am using props here because I m getting this error: "Cannot read property 'map' of undefined."

Any help is appreciated. Thanks!

Answer 1

Issue is props.data being undefined at the point of time its rendered.. If asynchrounsly updated, then try this.

{props?.data?.map(RenderClues)}

Answer 2

Map function takes key, and items. For Example:

props.data.map((key, items) => RenderClues)

Answer 3

First of all, you should run fetchData() inside Clues function. After fetching data, pass your data as props to RenderClues like below:

<Grid item xs={12} >
          data.map((dataItem) => {
              <RenderClues key={something uniq} data={dataItem} />
          })
        </Grid>

By the way, you have to change RenderClues to RenderClues = (props) => {your code} and use props inside RenderClues. And in the code above, i'm assuming you fetch data like that. You need to change that too