82289


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

[code]

          <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>
    
[/code]


CC BY-SA 4.0
2021-09-06T05:20:00.883
82277
2021-09-06T08:49:47.193
2021-09-06T05:33:31.160
3060
25636
question
reactjs
いずれか必須の部分を（※）で表現したい


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

[code]

    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>
      );
    }
    
[/code]

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


CC BY-SA 4.0
2021-09-06T08:49:47.193
82289
2021-09-06T08:49:47.193
298
82277
answer