How to optimize a code that's using alot of props in react?-CodePudding

So, i want to display a bunch of boxes containing text with different colors... To not create a difficult reading code, i decided to create a component that contains this box div. And then reuse it with props. The Preset() function is returning a div (box) with the props. But i am unsure if this can get optimized. Any suggestions?

CODE

const Main = () => {
  const Preset = (props) => {
    return (
      <div className={styles["main-boxes__box"]}>
        <h1>
          <span
            className={styles["boxes-box__preset"]}
            style={{ color: props.presetColor }}
          >
            {props.presetName}
          </span>
        </h1>
        <div className={styles["boxes-box__text"]}>
          <h2>
            <span style={{ color: props.color1}}>{props.span1}</span>
            {` ${props.text1}`}
            <br />
            {props.text2}
            <span style={{ color: "#CEB031" }}>{` ${props.span2}`}</span>
            <br />
            {props.text3}
            <span style={{ color: "#CEB031" }}>{` ${props.span3}`}</span>
          </h2>
        </div>
      </div>
    );
  };

  return (
    <Wrapper>
      <div className={styles["main-text"]}>
        <h1>Bem Vindo</h1>
        <div className={styles["main-subtext"]}>
          <h2>
            Para o seu favorito YT<span style={{ color: "#CEB031" }}>2</span>MP3
          </h2>
          <Line Class={styles["main-subtext__line"]} />
          <h2>Que tipo de aúdio atende você?</h2>
        </div>
      </div>
      <div className={styles["main-boxes"]}>
        <Preset
          presetName={"ÓTIMO"}
          presetColor={'#00FF47'}
          span1={"Ótima"}
          text1={"qualidade de aúdio"}
          text2={"Exportamos em"}
          span2={"320kbps"}
          text3={"Exportamos em"}
          span3={"CBR"}
        />
        <Preset
          presetName={"BOM"}
          presetColor={'#93FFAA'}
          span1={"Boa"}
          text1={"qualidade de aúdio"}
          text2={"Exportamos em"}
          span2={"192kbps"}
          text3={"Exportamos em"}
          span3={"mp3"}
        />

        <Preset
          presetName={"RUIM"}
          presetColor={'#25AB7B'}
          span1={"Baixa"}
          text1={"qualidade de aúdio"}
          text2={"Exportamos em"}
          span2={"64kbps"}
          text3={"Exportamos em"}
          span3={"mp3"}
        />
      </div>
     <Music Class={styles.svg}/>
    </Wrapper>
  );
};
``

CodePudding user response：

You can spread the props on top, so you don't need to call the props every time

const Preset = (props) => {
    const {
    presetName,
    presetColor,
    span1,
    text1,
    text2,
    span2,
    text3,
    span3
    } = props;
    return (
      <div className={styles["main-boxes__box"]}>
        <h1>
          <span
            className={styles["boxes-box__preset"]}
            style={{ color: presetColor }}
          >
            {presetName}
          </span>
        </h1>
        <div className={styles["boxes-box__text"]}>
          <h2>
            <span style={{ color: color1}}>{span1}</span>
            {` ${text1}`}
            <br />
            {text2}
            <span style={{ color: "#CEB031" }}>{` ${span2}`}</span>
            <br />
            {text3}
            <span style={{ color: "#CEB031" }}>{` ${span3}`}</span>
          </h2>
        </div>
      </div>
    );
  };

CodePudding user response：

There's not much to improve on the props front. The props that are in common among each Preset are:

text1={"qualidade de aúdio"}
text2={"Exportamos em"}
text3={"Exportamos em"}

Every other prop is different for each call. The best you could do there would be to create another component that returns a <Preset with those props in common.

const AudioExportPreset = props =>  <Preset
  {...props}
  text1="qualidade de aúdio"
  text2="Exportamos em"
  text3="Exportamos em"
/>;

and call it like

<div className={styles["main-boxes"]}>
        <AudioExportPreset
          presetName={"ÓTIMO"}
          presetColor={'#00FF47'}
          span1={"Ótima"}
          span2={"320kbps"}
          span3={"CBR"}
        />

Another option that would make AudioExportPreset more repetitive but make it more clear which props it expects to be called with would be to list each prop individually.

const AudioExportPreset = ({
  presetName,
  presetColor,
  span1,
  span2,
  span3,
}) => <Preset
  {...{
    presetName,
    presetColor,
    span1,
    span2,
    span3,
  }}
  text1="qualidade de aúdio"
  text2="Exportamos em"
  text3="Exportamos em"
/>;