I have given unique key to every item but the error persists, is it because the components renders multiple times?

I have tried to update the key of the second function by adding key={'product-' key} instead of key={key} like the key of the first function

The functions getComponent() getPoductComponent() getActionComponent() displays some dynamic inputs and the last one displays the submit btn

here is the rendering :

{
    this.state.loading ?
        <Loader/> :
        this.state.status ? [
            this.state.inputs.map((input, key) => {
                return (this.getComponent(input, key))
            }),
            <>
                <Wrapper>
                {
                    this.state.inputs.map((input, key) => {
                        return (this.getPoductComponent(input, key))
                    })
                }
                </Wrapper>
            </>,
            this.state.inputs.map((input, key) => {
                return (this.getActionComponent(input, key))
            })
        ] : ''
}

And here the functions : (the error shows when i call the function getPoductComponent())

getComponent = (input, key) => {
    let component;
    switch (input.formType){
        case 'textarea' :
            component = <TextareaComponent
                required={input.required}
                key={key}
                id={key}
                change={this.updatefieldInput}
            />;
            break;
        case 'Rate' :
            component = <rateComponent
                key={key}
                id={key}
                change={this.updatefieldInput}
            />;
            break;
        default:
            return ''
    }
    return component;
};

getPoductComponent = (input, key) => {
    let component;
    switch (input.formType){
        case 'ptextarea' :
            component = <TextareaProductComponent
                required={input.required}
                key={key}
                id={key}
                change={this.updatefieldInput}
            />;
            break;
        case 'pRate' :
            component = <rateProductComponent
                key={key}
                id={key}
                change={this.updatefieldInput}
            />;
            break;
        default:
            return ''
    }
    return component;
};

CodePudding user response：

Can you change the code to use fragment

{
    this.state.loading ?
        <Loader/> :
        this.state.status ? <>  //here 
            {
              this.state.inputs.map((input, key) => {
                return (this.getComponent(input, key))
              }),
            }
            <>
                <Wrapper>
                {
                    this.state.inputs.map((input, key) => {
                        return (this.getPoductComponent(input, key))
                    })
                }
                </Wrapper>
            </>,
            {
              this.state.inputs.map((input, key) => {
                 return (this.getActionComponent(input, key))
              })
             }
        </> : ''
}

Edit: Thanks to @Elichy, for improving the answer

Hope it helps