解決【React】Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.」

Uncaught Error: Rendered fewer hooks than expected.md

解決【React】Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.」

from

const Contents = (props: ContentsProps) => {
    return (
        <div key={props.title}>
            {props.contents.map( // here!!!
                renderFunc({
                    title: props.title,
                    listId: props.listId
                })
            )}
        </div>
    )
}

const renderFunc = ({
    title,
    handleDelete,
    handleOnBluer,
    listId
}: {
    title: string
    listId: number
}) => (content: Entity.ContentType) => {
    const [state, setValueState] = React.useState<{
        [contentId: number]: string
        listId: number
    }>({
        [content.id]: content.value,
        listId
    })
    const onChangeNative = React.useCallback(
        content => (e): void => {
            setValueState({ ...state, [content.id]: e })
        },
        [setValueState, state]
    )
    return (
        <div key={`${content.id}`}>
            <ContentWrapper>
                <Input
                    format="text"
                    value={state[content.id]}
                    onChange={onChangeNative(content)}
                    onBlur={handleOnBluer(state, listId)}
                    name={name}
                    errored={content.errored}
                    errorMessage={content.errorMessage}
                />
            </ContentWrapper>
        </div>
    )
}

to

const Contents = (props: ContentsProps) => {
   return (
       <div key={props.title}>
           {props.contents.map(content => ( // change to below!!!!!!!!!!!!!!!!!!!!!
               <Renderfun
                   title={props.title}
                   content={content}
                   listId={props.listId}
               />
           ))}
       </div>
   )
}

const Renderfun = ({
   title,
   content,
   listId
}: {
   title: string
   content: Entity.ContentType
   listId: number
}) => {
   const [state, setValueState] = React.useState<{
       [contentId: number]: string
       listId: number
   }>({
       [content.id]: content.value,
       listId
   })
   const onChangeNative = React.useCallback(
       content => (e: any): void => {
           setValueState({ ...state, [content.id]: e })
       },
       [setValueState, state]
   )
   return (
       <div key={`${content.id}`}>
           <ContentWrapper>
               <Input
                   format="text"
                   value={state[content.id]}
                   placeholder={`${title}を入力`}
                   name={name}
                   errored={content.errored}
                   errorMessage={content.errorMessage}
               />
           </ContentWrapper>
       </div>
   )
}