Open3

Reactスキルアップ

HIKARIHIKARI

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

このエラーは何をどうして欲しいのか完全に理解できていない

// NG
  const moveResultPage = () => {
    Router.push('/request/result')
    return
  }

// OK
  function moveResultPage() {
    Router.push('/request/result')
    return
  }
HIKARIHIKARI
A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

親であるApp.tsxから渡しているuseStateに初期値がなかったため怒られていた

HIKARIHIKARI
return type 'Element[]' is not a valid JSX element.
<Year />

const Year = () => {
  const { register } = useFormContext();
  return (
    years.map(value => (
        <label css={styles.label} key={value}>
          <input type="radio" value={value} {...register("year", { required: true })} checked={value === thisYear} />{value}
        </label>
      ))
  );
}

単一エレメントになってなかったので修正

const Year = () => {
  const { register } = useFormContext();
  return (
    <> // <>と{で囲む
      {years.map(value => (
        <label css={styles.label} key={value}>
          <input type="radio" value={value} {...register("year", { required: true })} checked={value === thisYear} />{value}
        </label>
      ))}
    </>
  );
}