0

requiredで表現すると必須となるので、期限1、2、3のいずれか必須項目を期限1、2、3のあとに(※)を表示するにはどのようにすればいいでしょうか。

      <Row>
        <Label required className="w-5/60">
          期限1
        </Label>
        <Field className="flex w-25/60 2xl:w-35/60">
          <InputDate value={props.data?.TANJO_DATE} />
        </Field>
      </Row>
   <Row>
        <Label required className="w-5/60">
          期限2
        </Label>
        <Field className="flex w-25/60 2xl:w-35/60">
          <InputDate value={props.data?.TANJO_DATE} />
        </Field>
      </Row>
   <Row>
        <Label required className="w-5/60">
          期限3
        </Label>
        <Field className="flex w-25/60 2xl:w-35/60">
          <InputDate value={props.data?.TANJO_DATE} />
        </Field>
      </Row>

1 件の回答 1

2

一般的には小さなコンポーネント(例のMyLabel)を作って共通化することが多いのではないでしょうか

function MyLabel({ name, required, children }) {
  const getLabel = () => {
    if (required) {
      return `${children}(※)`;
    } else {
      return `${children}`;
    }
  };

  return (
    <>
      <label required={required}>{getLabel()}</label>
    </>
  );
}

export default function App() {
  return (
    <div className="App">
      <div>
        <MyLabel>期限1</MyLabel>
        <input type="text" />
      </div>
      <div>
        <MyLabel required={true}>期限2</MyLabel>
        <input type="text" />
      </div>
      <div>
        <MyLabel required={false}>期限3</MyLabel>
        <input type="text" />
      </div>
    </div>
  );
}

https://codesandbox.io/s/ja-stackoverflow-82277-h7toy

1
  • ありがとうございます。参考になりました。
    – user25636
    2021年9月7日 0:33

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。