best practices in passing data with props in react

Question

I have a problem with the structure of my project and i wanted to know what is the best way to solve my problem. I have three components and two level of nesting:

my grand parent component:

function WhatClientSay() {
 
  return (
    <Container
      component="section"
    >
      <ClientCard />
    </Container>
  );
}

the ClientCard component:

import ClientAvatar from "../ClientAvatar/ClientAvatar";

function ClientCard(props) {
  return (
    <div>
      <Box>
        <Typography
          fontWeight="600"
        >
          what client say
        </Typography>


        <Typography>
          “Excepteur sin occaecat cupidatat proident. It’s sunt in culpa qui
          officia deserunt mollit anim id 
        </Typography>

        <Box sx={{ display: "grid", placeItems: "center" }}>
          <ClientAvatar
            username="naomi hamilton"
            role="customer"
            rate={5}
            profileImg={profileImg}
          />
        </Box>
      </Box>
    </div>
  );
}

and my ClientAvatar component (it just renders some props beside a photo as an avatar) :

function ClientAvatar({ profileImg, username, role, rate }: AvatarProps) {
  return (
    <>
      <Box sx={{ mt: 3, "& img": { width: 70, height: 70 } }}>
        <Grid container spacing={1}>
          <Grid item>
            <img src={profileImg} alt="profile" />
          </Grid>
          <Grid item>
            <Grid
              container
              direction="column"
              spacing={0}
              justifyContent="space-between"
              alignItems="flex-start"
            >
              <Grid item>
                <Typography
                  sx={{
                    fontSize: 15,
                    textTransform: "uppercase",
                    fontWeight: "600",
                  }}
                >
                  {username}
                </Typography>
              </Grid>
              <Grid item>
                <Typography
                  sx={{
                    fontSize: 13,
                    textTransform: "uppercase",
                    fontWeight: "600",
                    mb: 1,
                  }}
                >
                  {role}
                </Typography>
              </Grid>
              <Grid item>
                <Rating size="small" name="read-only" value={rate} readOnly />
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Box>
    </>
  );

so my questions are:

1. what is the best way to pass data to my components? should i pass the ClientAvatar props from the grandparent component to the child and then to its child??

2. what is the best way of writing hard coded values like titles and subtitles?? should i store them in an object and pass them as props to the child component? or should i make an object like this and pass it to the Typography?

const contexts = {title : 'what client say' , subtitle:' lorem lorem' }

thanks in advance.

Answer 1

1. It depends on where is the source of your ClientAvatar props. I mean if you take those data from grand parent then yes you can start drilling from that level otherwise if the data is coming from ClientCard component, then your grand parent component shouldn't know about it.
2. I would prefer to pass them as string because if you use object, then maybe you'll not need all of the the properties of your object in your child component but you'll send them anyway for no reason and it will effect performance in a bad way. But it really depends on the use case, there could be some cases using object could make sense.