상품(product) 수정시 const 사용이 안되는 이유

안녕하세요

멋진 강의 잘 듣고 있습니다.

Todo에서 ReadComponent.js 안에서 read 할때 const makeDiv = () => () 와 같이 Arrow Function을 사용해서 간단하게 표현해주셨는데요,

수정할때도 간단하게 사용해보고 싶어서

Product의 ModifyComponent.js 에서 아래와 같이 만들어 사용해봤습니다.

{makeDiv("name", product.pname, "text", handleChangeProduct)}
{makeDiv("description", product.pdesc, "text", handleChangeProduct)}
{makeDiv("price", product.price, "number", handleChangeProduct)}

const makeDiv = (title, value, type, handleChangeProduct) => (
  <div className="flex justify-center">
    <div className="relative mb-4 flex w-full flex-wrap items-stretch">
      <div className="w-1/5 p-6 text-right font-bold">{title}</div>
      <input
        className="w-4/5 p-6 rounded-r border border-solid border-neutral-300 shadow-md"
        name={title}
        type={type}
        value={value}
        onChange={handleChangeProduct}
      ></input>
    </div>
  </div>
);

만들어보니까,

price(넘버)는 수정이 되는데,

pname과 pdesc는 수정이 안되더라구요, readOnly가 먹혀있었습니다.

text와 number가 다른걸까요...

수정이 안되는 이유가 뭔지 궁금합니다ㅠ

추가로, const makeDiv 는 return 아래에 추가를 해주셨는데,

return 위에가 아니라 return 아래에 추가한 이유도 궁금합니다.

확인 부탁드립니다.

감사합니다.

{makeDiv("pname", product.pname, "text", handleChangeProduct)}

{makeDiv("pdesc", product.pdesc, "text", handleChangeProduct)}