How do you repeat a character, after content, and fill it to 100% of width? JSX / React

Question

I have been looking for designs and I stumbled upon Material Design - Basil looking through the description I saw how Basil displays ingredients and was curious as to how that is done.

Link: https://material.io/design/material-studies/basil.html#components

it is the first item under the Components section.

I tried something like

const varRecipeIngredientBuilder
    = jsnIngredients =>(
        <div>

        <ListItem>
            <Grid item xs={1}>
                <Checkbox/>
            </Grid>
            <Grid item xs={9}>
            <h5>{jsnIngredients.name}{" . ".repeat(38 - jsnIngredients.name.length )}</h5>
            </Grid>
            <Grid item xs={1}>

            <h5>{jsnIngredients.quantity}</h5>
            </Grid>
            <Grid item xs={1}>

            {jsnIngredients.measurement}
            </Grid>


        </ListItem>
        </div>
    )
function RecipeIngredients ({json}){
    return(
        <List>
            {json.map(varRecipeIngredientBuilder)}
        </List>
    )
};

export default RecipeIngredients;

I feel that I am close... but maybe that "38" should be something else.

right now some items in the list line up and some dont (even by using "."). the end slightly jagged in maybe 10% of the list and not as seamless as the example.

who knows, maybe the . is throwing me off and it isnt a text repeat.

Disclaimer: I have been using js/react for about 2 weeks now. I am a career data architect, so I understand design patterns... but it is still a new language to me. So to learn, I try and duplicate what i see.

Answer 1

Below is an example of one way to do this. The approach in my example is just to have more than enough dots to fill the available space, then use noWrap on the Typography so that the extra dots are hidden, and override the default noWrap styling to remove textOverflow: 'ellipsis'.

import React from "react";
import Grid from "@material-ui/core/Grid";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Typography from "@material-ui/core/Typography";
import { withStyles } from "@material-ui/core/styles";

const ingredients = [
  { name: "Basil", amount: "6 tbsp" },
  { name: "Gluten-free Spaghetti", amount: "2 cups" },
  { name: "Garlic", amount: "1 tbsp" }
];
const dots = " . ".repeat(500);
const TypographyNoEllipsis = withStyles({ noWrap: { textOverflow: "unset" } })(
  Typography
);
export default function App() {
  return (
    <List>
      {ingredients.map(ingredient => {
        return (
          <ListItem>
            <Grid container spacing={1}>
              <Grid item xs={10}>
                <TypographyNoEllipsis noWrap>
                  {ingredient.name}
                  {dots}
                </TypographyNoEllipsis>
              </Grid>
              <Grid item xs={2}>
                <Typography>{ingredient.amount}</Typography>
              </Grid>
            </Grid>
          </ListItem>
        );
      })}
    </List>
  );
}