Open3
Reactスキルアップ
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
}
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に初期値がなかったため怒られていた
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>
))}
</>
);
}